我需要幫助搞清楚如何切換一個元素一旦窗口的垂直高度滾動

我想切換div從相對固定當我向下滾動使用JavaScript的200px。當我從窗口頂部到達200px時，我的div應該切換到固定狀態。當我在頂部200px之上時，它應該回到相對位置。有沒有人有關於如何做到這一點的想法？我需要幫助搞清楚如何切換一個元素一旦窗口的垂直高度滾動

來源

2012-08-28 BeDesinged

喜歡的東西：

$(window).on('scroll', function() { 
    $("#myDivID").css({ 
     position: $(this).scrollTop()<200?'relative':'fixed', 
     top: $(this).scrollTop()<200?'200px':'0px' 
    }); 
});

你可能還需要重置元素的top位置。

來源

2012-08-28 15:44:46 adeneo

哇，那很快。謝謝！我將如何去「重置頂部」？ – BeDesinged

我建議先前緩存一個對'$（「＃myDivID」）'的引用，否則每次發生滾動事件時你都會重新評估。你可以在上面的範圍聲明它，將所有的代碼包裝在一個匿名的即時執行函數中 – fcalderan

好吧，如果你的元素的css top設置爲'200px'，並且向下滾動直到元素完全位於屏幕的頂部，然後突然變成'fixed'位置，你會發現元素從頂部跳到200px，因爲現在它不再處於文檔流中。在這種情況下，您必須將頂部位置更改爲零，但確切數字取決於您的設計。 – adeneo

我知道至少有幾個插件可以做到這一點。不記得一個我最後一次見到的名字，但這裏有一個我寫我自己：http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js

您可以使用它，像這樣：

$('#my-element').fixedIfNeeded();

有一個指定是否應將元素可選參數在到達另一個元素（例如頁腳）之前停止修復：

$('#my-element').fixedIfNeeded('#footer');

來源

2012-08-28 15:48:18 powerbuoy

我需要幫助搞清楚如何切換一個元素一旦窗口的垂直高度滾動

回答

相關問題