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＃内容。这样我们就可以获得内容div的正确高度现在$('#content').height() + $('#content').offset().top是侧边栏应移动的最大距离。这意味着，侧边栏的offset.top +高度不应超过这个。在滚动处理程序中添加此检查

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

2 个答案: