首頁 > web前端 > css教學 > 主體

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

Mary-Kate Olsen
發布: 2024-10-30 06:31:02
原創
906 人瀏覽過

How to Make a Div Stick to the Top of the Screen While Scrolling?

滾動時將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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!