如何讓div向下滾動頁面一旦到達頁面頂部？

我知道標題有點混亂;但是基本上我想做的事情就是在本網站上清楚地演示http://9gag.com向下滾動並關注側邊欄，有2個廣告一旦第二個廣告到達頁面頂部它開始向下滾動頁面。如何讓div向下滾動頁面一旦到達頁面頂部？

我想知道如何做到這一點？ html/css或jQuery解決方案是prefared。

2011-12-22 Ilja

最簡單的方法是聽body標籤的滾動事件，那麼當scrollTop的獲得過去一定量，添加一個類的廣告使其位置固定，然後在scrollTop回到低於該數量時移除該類。我沒有代碼作爲示例發佈，因此我不會將其作爲答案發布。 – 2011-12-22 18:34:52

@KevinB thnx，但是我對代碼不太熟悉，所以我會預先編寫一個代碼，但是thnx是一個邏輯！ – Ilja 2011-12-22 18:37:27

正如Kevin所指出的那樣，您需要做的就是聽取文檔的scroll事件。當它被解僱時，您需要查看scrollTop的值。

$(document).scroll(function() { 

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue; 
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar); 

});

而且你的CSS將基本上是這樣的：

.my-sidebar-items.fixedSidebar { position: fixed; }

一個複雜因素是，你可能想要的物品被固定在新的，最高職位，而你會想做這樣的事情：

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 }

但是，這可能會堆疊您的項目在另一個之上。解決方案是將fixedSidebar類放在容器上，並按照所述使用該類。

Demo

來源

2011-12-22 18:44:35

我會嘗試一下現在thnx – Ilja 2011-12-22 18:47:31

你可以用粘條http://archive.plugins.jquery.com/plugin-tags/sticky或jQuery的航點http://imakewebthings.github.com/jquery-waypoints/

來源

2011-12-22 18:53:38 eveevans

如何讓div向下滾動頁面一旦到達頁面頂部？

回答

相關問題