Question

我有一个解决方案，当您在页面上下滚动时，在视口中保留侧边栏。当侧边栏长于内容区域时出现问题，并且随着侧边栏不断向下推动页脚，您继续滚动以获得此抖动效果。

我在jsFiddle中有一个这样的设置示例：http://jsfiddle.net/U9F7w/2/（全屏：http://jsfiddle.net/U9F7w/2/embedded/result/）

我的问题是，有没有办法让侧边栏在触及底部/页脚区域后停止？

我已经阅读some solutions关于将侧边栏设置为绝对，不幸的是它是一个现有网站，并且更改位置不起作用并且与许多现有页面元素混淆。

这是我正在使用的jQuery / js：

    // set the offset
    var sidebarOffset = $(".sidebar").offset();
    var sidebarPadding = 15;

    // when the window scrolls, keep sidebar in view
    $(window).scroll(function() {
        if ($(window).scrollTop() > sidebarOffset.top) {
            $(".sidebar").stop().animate({marginTop: $(window).scrollTop() - sidebarOffset.top + sidebarPadding });
        } 
        else {
            $(".sidebar").stop().animate({marginTop: 0});
        };
    });

修改

我想到的一件事是（不确定这是否可能）来检测一个div的底部是否低于另一个div的底部，停止滚动。有没有办法检测一个div的底部是否低于另一个？

Answer 1

检查侧边栏的高度是否大于内容的高度：

var ct = $(".content");
var sb = $(".sidebar");
var sbOffsetTop = sb.offset().top;
var sbPadding = 15;

$(window).scroll(function() {
    if (sb.height() < ct.height()) {
        if ($(window).scrollTop() > sbOffsetTop) {
            sb.stop().animate({top: $(window).scrollTop() - sbOffsetTop + sbPadding });
        } 
        else {
            sb.stop().animate({top: 0});
        };
    };
});

请参阅demo fiddle with large content和demo fiddle with large sidebar。

我不知道为什么，我会将top与position: relative结合使用，但marginTop也可以。

在视口中保留侧边栏，滚动问题

1 个答案: