一千萬個為什麽

搜索

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

我知道標題有點令人困惑; D但基本上我想要做的就是在這個網站上清楚地展示了 http://9gag.com 向下滾動並註意側邊欄,有2個廣告,一旦第二個廣告到達頁面頂部,它開始向下滾動頁面。

我想知道怎麽做? html/css或jQuery解決方案已經預先準備好了。

最佳答案

正如凱文指出的那樣,你需要做的是聽取文檔的 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 類放在容器上,並按照描述使用該類。

演示

轉載註明原文: 一旦頁面到達頁面頂部,如何讓div向下滾動?