如何使 Div'粘”到滾動頁面的頂部？

垂直捲動時將Div 放置在螢幕頂部

問題：

問題：

我如何製作當使用者捲動瀏覽網頁時，div「黏」在網頁頂部？返回頁面頂部後，我想讓div恢復到原來的位置。

解決方案：

<code class="javascript">// Cache selectors for improved performance
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

這個功能的關鍵是設定position:fixed在div 僅在使用者滾動過去後才顯示。為了實現這一點，我們可以使用附加到window.scroll 事件的處理程序：

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

當頁面滾動經過它時，此程式碼會向div 添加一個黏性CSS 類，並在頁面返回時刪除該類別到頂部。 CSS 類別定義為：

新增 Sticky 類別後，div 將採用固定位置並保持在螢幕頂部。當類別被刪除時，它會回到原來的位置。

注意：程式碼已經過最佳化，可以快取 jQuery 物件以提高效能。

以上是如何使 Div'粘”到滾動頁面的頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！