jQuery实现真正的侧边栏随窗口滚动

ifyoung • 2017年4月18日 pm7:11 • 编程语言, 网站建设 • 阅读 1075

题目之所以加上真正的几个字，是因为找这段自己想要的代码实在是不容易。看到很多资料，很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。

方法一：

最初想到的当然是前端大咖bootstrap。bootstrap提供了一个affix的插件功能。这个affix可以允许该模块在拖动滚动条的时候把新的样式赋予模块，核心就是把该元素position给fixed。然而这样会产生出一个问题。当sidebar宽度超出后，会重叠到右侧主题内容。还有一个问题，当你用到其他设备查看的时候，sidebar将会漂浮在页面上，非常难看。所以这种方法不是我想要的。

方法二：

多方查找，终于有了收获。核心思想就是监听滚动来判断事件，监听滚动位置来分支操作。通过停止和动画来处理最后想要的位置。于是利用JQuery就有了下述代码:

step1: 引入jquery

setp2：

<script type="text/javascript">   
$(function() {
    var $sidebar   = $("#sidebar"),   
        $window    = $(window),   
        offset     = $sidebar.offset(),   
        topPadding = 15;   
  
    $window.scroll(function() {   
        if ($window.scrollTop() > offset.top) {   
            $sidebar.stop().animate({   
                marginTop: $window.scrollTop() - offset.top + topPadding   
            });   
        } else {   
            $sidebar.stop().animate({   
                marginTop: 0   
            });   
        }   
    });   
  
});   
</script>

$(function() {

var $sidebar = $("#sidebar"),

$window = $(window),

offset = $sidebar.offset(),

topPadding = 15;

$window.scroll(function() {

if ($window.scrollTop() > offset.top) {

$sidebar.stop().animate({

marginTop: $window.scrollTop() - offset.top + topPadding

});

} else {

$sidebar.stop().animate({

marginTop: 0

});

}

});

</script>

上述方法能够完美解决这个问题。但是又有了新的问题。如果换用其他设备，当sidebar占据整个宽度的时候，那么会导致sidebar一直占据顶端，下拉后看不到正文。所以笔者又改变了其中一部分代码，根据当前文档宽度再判断一次，是否增加此操作。

最终代码：

<script type="text/javascript">
    $(function() {
    var $sidebar   = $("#roll"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 100;

    $window.scroll(function() {
        if ($(document.body).width() > 768){
            if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
        }

    });

});
</script>

$(function() {

var $sidebar = $("#roll"),

$window = $(window),

offset = $sidebar.offset(),

topPadding = 100;

$window.scroll(function() {

if ($(document.body).width() > 768){

if ($window.scrollTop() > offset.top) {

$sidebar.stop().animate({

marginTop: $window.scrollTop() - offset.top + topPadding

});

} else {

$sidebar.stop().animate({

marginTop: 0

});

}

});

</script>

原创文章，作者：ifyoung，如若转载，请注明出处：https://www.drugfoodai.com/jquery-scroll.html

jQuery实现真正的侧边栏随窗口滚动

相关推荐

发表评论 取消回复

发表评论取消回复