側欄不會滾動超過其內容

Question

我有一個包含長內容的頁面。除此之外，還有一個內容較少的側邊欄，如果您繼續向下滾動，在某一時刻邊欄中只會出現空白。

所以我試圖做的是一旦側邊欄達到其內容的結尾，高度給它固定的位置，但仍然有東西要滾動給它靜態位置。

所以我有

$(window).scroll(function() { 
    var y = $(window).scrollTop(); 
    var x = $(window).scrollTop() + $(window).height(); 
    var s = $('#sidebar').height(); 
    if (x > s) { 
     $('#sidebar').css({ 
      'position': 'fixed', 
       'bottom': '0' 
     }); 
    } 
    if (x < s) { 
     $('#sidebar').css({ 
      'position': 'static' 
     }); 
    } 
    }); 

這還挺工作。它從靜態位置開始，但是當我沿任何方向滾動時，它會變爲固定。不過，我希望它保持靜態，同時也有一些是通過滾動（在向上和向下方向）

編輯基本上就應該像這樣工作：http://jsfiddle.net/cJGVJ/12/但沒有陰影效果。

Answer 1

給HTML和BODY height: 100%;

html, body{ 
    height: 100%; 
} 

#sidebar{ 
    position: absolute; 
    bottom: 0px; 
}