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

您可以使用position：fixed

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");
    }

});

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

1 个答案: