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

});