如何将高度超过视口的固定div粘贴到body上

我知道div的定位（固定、绝对和相对）。我可以将一个固定的 div 附加到 body 上，以便在滚动 body 时它会粘在相同的位置。我在这里问一个稍微不同的问题。

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

例如，Facebook 墙的右侧边栏随正文滚动，一旦右侧边栏的底部可见（固定），则停止随正文滚动。

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

The 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'});
        }
    });
});

And a demo.