粘滞侧边栏不会停止滚动

时间:2015-04-13 10:09:21

标签: javascript css sidebar sticky

我的页面上有一个粘性边栏,使用以下脚本:

$(function() {
            var offset = $("#sidebar").offset();
            var 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
                    });
                };
            });
        });

问题是它应该在到达Middle Block Div时停止滚动。目前,它不会停止滚动,而是将所有其他内容推送下来。有办法解决这个问题吗?

- DEMO -

谢谢。

2 个答案:

答案 0 :(得分:1)

您已检查补充工具栏是否已移至Middle Box,如果是这样,请停止侧边栏进行动画制作。 喜欢这样:

$(function() {
            var offset = $("#sidebar").offset();
            var boxOffset = $(".middle-block").offset().top;
            var sidebarHeight = parseInt($("#sidebar").outerHeight());
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    if(($(window).scrollTop()+sidebarHeight)<boxOffset){
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                    }
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

在此处查看:jsfiddle

答案 1 :(得分:1)

您需要获取.middle-block的位置并停止侧边栏滚动(减去侧边栏的高度)。

将您的jQuery函数更改为:

$(function() {
    var offset = $("#sidebar").offset();
    var mbOffset = $(".middle-block").offset();
    var mbPos = mbOffset.top - $("#sidebar").outerHeight() - 30; /*30px extra space*/
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top ) {
            if(  $(window).scrollTop() < mbPos ) {
                $("#sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            }
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

Updated Pen