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

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

由于边栏不能超过$('#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
            });
        }
    });
});

Answer 2

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