![[已删除]](https://img-cdn-tc.dcloud.net.cn/account/identicon/749d87660f5ada2a1a68b31de840193b.png)
Jquery页面滚动条向下拉到div的位置时，此div就固定在顶部，向上拉时返回原位置Div在网页打开时固定在某个位置(不一定是网页的最顶端)，当滚动条向下滚动时，页面的顶部到达此div位置后，此div就固定在网页的最顶部跟随移动，当滚动条向上滚动时，页面顶部高过此div原来的固定位置，此div就定在原位置不再跟随滚动条移动(相当于返回原来的位置)。下面就来详细分享一下源码：
<head>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var pos = $('#div1').offset();// offset() 获得div1当前的位置，左上角坐标(x,y)
$(window).scroll(function () { //滚动条滚动事件
if ($(this).scrollTop() > pos.top ) {
$('#div1').css('width', '100px').css('top', $(this).scrollTop() - pos.top);
} else if ($(this).scrollTop() <= pos.top ) {
$('#div1').css('width', '100x').css('top',0).css('position', 'relative');
}
})
}; </script>
</head>
<html>
<div id="div1" style="width:100px">
我就是要跟着滚动条移动的div.
</div> </html>
好了，看到这里大家应该清楚是如何实现的吧，如果还是存在不理解的地方或者不知道哪里出错了，都是可以留言来获得帮助和解答。
本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明出处!
0 个评论
要回复文章请先登录或注册