滾動列停止滾動

Question

我真的很喜歡如何的第二列（在首頁上看到）滾動與內容的其餘部分，像一個普通的列，那麼當你達到這個塔的底部，它會停止滾動，而其餘內容繼續像往常一樣滾動。

我有一個快速瀏覽一下代碼，但不是很明顯，什麼是用來實現這一目標的技術？有什麼事情可以改裝到現有的網站？

TIA。

Answer 1

我將試圖解釋它是如何工作。

第一列就像一個定期專欄。示例css：

#regular 
{ 
width:200px; 
height:500px; 
background:gray; 
position:absolute; 
top:0; 
} 

副本使用jQuery來檢查您的滾動位置是否大於列的位置。如果這是真的，那麼Css更改爲這樣的事情：

position: fixed; 
top:200px; //menu height 

或者

position: absolute 
top: scroll.offset height. 

然後用屏幕上的滾動欄一起。

如何動態地更改CSS？ 示例代碼：

var windowScreen = $(window); 
var column = $("#regular"); 

//Call function if user scrolls 
windowScreen.scroll(function() { 

    if(windowScreen.scrollTop() == 200) 
    { 
     $("#regular").css({"position":"fixed", "top":"200px"}); 
    } 

}