100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Jquery页面滚动条向下拉到div的位置时 此div就固定在顶部 向上拉时返回原位置

Jquery页面滚动条向下拉到div的位置时 此div就固定在顶部 向上拉时返回原位置

时间:2019-05-12 14:27:31

相关推荐

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><body><div id="div1" style="width:100px">我就是要跟着滚动条移动的div.</div></body>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。