您的位置：首页 > Web前端 > JQuery

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

2018-02-12 14:25 921 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航