两侧跟随广告

最新推荐文章于 2024-03-27 15:40:52 发布

Surpass-oneself

最新推荐文章于 2024-03-27 15:40:52 发布

阅读量285

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_41882787/article/details/80085009

版权

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现图片在页面滚动时跟随滚动并保持相对位置的方法。通过计算滚动距离和图片原始位置，确保图片随滚动条上下移动，同时能够回到初始位置。适用于网页设计中需要元素跟随滚动的效果。

摘要由CSDN通过智能技术生成

var top = pic.offsetTop;

target = scroll().top + top; // 把最新的 scrolltop 给 target

在这里例子当中最为重要的是两句。为什么要加上，top的值。我们知道，水平滚到条滚动的时候。图片是需要动的，我打印了scroll().top 和target的值。我们看到是图片变化的距离和scroll().top的变化的距离需要一直，图片才不会被隐藏。但是如何让图片在滚动之后回到原来的位置，需要在scroll().top其基础上加上top值。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img{
position: absolute;
left:0;
top:50px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style>
<script src="my.js" type="text/javascript"></script>


<script>
window.onload = function() {
var pic = $("pic");
var leader = 0;
var target = 0;
var timer = null; // 定时器
var top = pic.offsetTop; // 50
window.onscroll = function() {
clearInterval(timer);
console.log(scroll().top);
target = scroll().top+top; // 把最新的 scrolltop 给 target
console.log(target);
timer = setInterval(function() {
leader = leader + (target - leader ) / 10;
pic.style.top = leader + 'px';
},30)
}
}
</script>

</head>
<body>
<img src="images/aside.jpg" alt="" id="pic"/>
<div id="demo">
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
天王盖地虎，小鸡炖蘑菇
</div>
</body>
</html>