javascript - 如何阻止固定侧边栏进入页脚？

Question

我正在建立一个网站。http://check.topicwine.com 看看我的作品。

我想做一个静态侧边栏。我正在使用代码：

$(function() {
        var offset = $("#ad-wrapper").offset();
        var topPadding = 60;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#ad-wrapper").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
            });
            } else {
                $("#ad-wrapper").stop().animate({
                marginTop: 0
            });
        };
});
});

侧边栏出现了，但它也出现在不应该出现的地方。我的意思是，它也进入了页脚。相反，它与页脚重叠。

我希望它停在网格旁边。

提前致谢。:)

Answer 1

添加overflow:hidden到 div#content。这样我们将获得内容 div 的正确高度。
现在$('#content').height() + $('#content').offset().top是侧边栏应该移动的最大距离。这意味着，侧边栏的 offset.top + height 不应超过此值。在您的滚动处理程序中添加此检查

Answer 2

设置上边距的限制，因为侧边栏不能越过$('#main')元素。

$(function() {
    var offset = $("#ad-wrapper").offset();
    var topPadding = 60;
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop(); // Store this for convenience
        if (scrollTop > offset.top) {
            var newMarginTop = scrollTop - offset.top + topPadding;
            // The sidebar can only go so far!
            var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
            if (newMarginTop > marginLimit) 
                newMarginTop = marginLimit;
            $("#ad-wrapper").stop().animate({
                marginTop: newMarginTop 
            });
        } else {
            $("#ad-wrapper").stop().animate({
                marginTop: 0
            });
        }
    });
});