jquery - 如何将高度超过视口(viewport)的固定div粘贴到 body

Question

我知道 div 的定位(固定、绝对和相对)。我可以将一个固定的 div 附加到 body 上，这样它在滚动 body 时会保持在相同的位置。在这里，我要问一个有点不同的问题。

我有一个高度超过视口(viewport)高度的侧边栏，我希望它固定在主体上。滚动 body 时，它也应该滚动，但一旦固定 div 的底部可见，它不应该与 body 一起滚动。

例如，Facebook 墙的右侧边栏与主体一起滚动，一旦右侧边栏的底部可见(固定)，则停止与主体滚动。

Answer 1

这可以通过将侧边栏设置为绝对并在窗口滚动位置通过底部后立即将其更改为固定来实现。

CSS:

#sidebar {
    height: 120%;
    width: 100px;
    border: 2px solid blue;
    padding: 20px;
    margin: 20px;
    position: absolute;
    top: 0;
}

jQuery:

$(document).ready(function() {
    var bottomPos = $('#sidebar').outerHeight(true) - $(window).height();
    $(window).scroll( function() {
        if ( $(window).scrollTop() > bottomPos ) {
            $('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'});
        } else {
            $('#sidebar').css({'position':'absolute','top':'0px'});
        }
    });
});

和a demo .