如何讓div在滾動時粘在螢幕頂部？

滾動時將Div 保持在屏幕頂部

在某些情況下，希望有一個div 緊貼在屏幕頂部當用戶向下方捲動經過螢幕時，螢幕會在使用者瀏覽網頁時有效地「跟隨」他們。此行為可確保按鈕或導航控制項等基本元素保持易於存取。

要達到此效果，您可以採用以下策略：

JavaScript 程式碼：

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

// Attach a handler to the window's scroll event.
$window.scroll(function() {
    // Determine if the div has been scrolled past.
    if ($window.scrollTop() > elTop) {
        // Add a CSS class to make the div sticky.
        $stickyEl.addClass('sticky');
    } else {
        // Remove the sticky class when the user scrolls back up.
        $stickyEl.removeClass('sticky');
    }
});</code>

CSS 類別：

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

CSS 類別：

說明：

JavaScript 程式碼最初快取jQuery 物件更好的效能。然後，它會向視窗新增一個滾動事件偵聽器，每當使用者垂直滾動時就會觸發該事件偵聽器。在偵聽器中，它透過將視窗的捲動位置與 div 相對於頁面頂部的偏移量進行比較來檢查 div 是否已捲動過去。如果滾動位置大於偏移量，則會在 div 中添加黏性 CSS 類，將其位置設為固定並將其放置在螢幕頂部。相反，當使用者向上滾動且滾動位置小於偏移量時，黏性類別將被刪除，將 div 返回到其原始位置。

以上是如何讓div在滾動時粘在螢幕頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！