javascript - 将侧边栏保持在视口(viewport)中，滚动有问题

Question

我有一个解决方案，可以在您上下滚动页面时在视口(viewport)中保留边栏。当侧边栏比内容区域长时出现问题，并且您继续滚动时会出现这种抖动效果，因为侧边栏一直将页脚向下推。

我在 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 也可以正常工作。