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

Question

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

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

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

我已阅读关于将侧边栏设置为绝对的一些解决方案，不幸的是它是一个现有网站并且更改位置不起作用并且会扰乱许多现有的页面元素。

这是我正在使用的 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的底部是否低于另一个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});
        };
    };
});

请参阅大内容的演示小提琴和带有大侧边栏的演示小提琴。

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