javascript - 如何使粘性侧边栏仅在父容器内 float

Question

请问我使用这个 jquery 代码使我的侧边栏变粘，但它漂浮到页面的页脚并覆盖它，请问我怎样才能停在父容器的底部(即外包装)

$(function() {

    var $sidebar   = $("#sidebarfo"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 170;

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

});

抱歉，我无法获得在 jsfiddle 上运行的代码，我可以上传它，但可以在此处找到实际示例:http://www.wilburtech.com .请向下滚动页面至“关注我们”小部件。

我从 https://css-tricks.com/examples/ScrollingSidebar/ 得到脚本

到目前为止，我采取的唯一步骤是使用 z-index 将其隐藏在页脚后面。

Answer 1

我会尝试使用 .scrollHeight() 并将 $window.scroll 设置为使用一个范围，可能是这样的:

    var $sidebar   = $("#sidebarfo"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 170,
        footerHeight = XXX;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top < ($window.scrollHeight() - footerHeight)) {
           //animation stuff.
           }
    });