粘性侧边栏不会停止滚动

Question

我的页面上有一个粘性侧边栏，使用以下脚本：

$(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 时它应该停止滚动。目前它不会停止滚动，而是将所有其余内容向下推。有没有办法来解决这个问题？

- 演示 -

谢谢你。

Answer 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
            });
        };
    });
});

更新的笔