jQuery：滚动时修复窗口底部边缘的div？

Question

我的网站上有一个侧边栏，一旦达到它的高度，它应该贴在浏览器窗口的底部 - 我知道这听起来很复杂，但可能不是。

我在 jsfiddle 上做了一个小演示：http://jsfiddle.net/dJXS2/1/

$(window).scroll(function() {

    var bh = $(window).height();
    var st = $(window).scrollTop();
    var eh = $('#element').height();
    var eo = $('#element').offset();

    if ( st >= (eo.top + eh) - bh ) {
        //$('#element').css('position', 'fixed');
    }


});
​

所以，再一次 - 我想要什么： 您会看到 div page-height 只是为了测试目的而使主体更长。绿色侧边栏比页面高度短。一旦用户滚动到绿色条的底部，我希望绿色条固定在它当前所在的位置。所以我不希望用户看到绿条下面的空白。再次向上滚动时，我当然希望恢复正常的滚动行为，并且不应再修复绿条。

对此有什么想法吗？

Answer 1

你可以使用位置：固定

http://jsfiddle.net/dJXS2/5/

$(window).scroll(function() {

    var bh = $(window).height();
    var st = $(window).scrollTop();
    var el = $('#element');
    var eh = el.height();
    if ( st >= (100 + eh) - bh ) {
        //fix the positon and leave the green bar in the viewport
        el.css({
            position: 'fixed',
            left: el.offset().left,
            bottom: 0
        });
    }
    else {
        // return element to normal flow
        el.removeAttr("style");
    }

});