如何使 Div 粘在滾動上：固定定位和事件處理指南？

粘性 Div：滾動時緊貼屏幕頂部

想像一下，有一個靠近頁面頂部且帶有重要按鈕或控件的 div。當用戶垂直滾動時，您希望該 div 跟隨他們，緊貼螢幕頂部。返回頂部後，它應該會恢復其原始位置。

解決方案

實現此行為的關鍵是僅在用戶將其滾動經過視口後才使 div “粘性”。這涉及將其 CSS 位置設為固定。以下是如何實現它：

<code class="javascript">// Cache jQuery objects for efficiency.
const $window = $(window);
const $stickyEl = $('#the-sticky-div');
const elTop = $stickyEl.offset().top;

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

此程式碼將事件處理程序附加到視窗的捲動事件。觸發時，它會檢查當前滾動位置是否超過 elTop（div 相對頂部的初始偏移量）。如果為 true，它會為 div 添加一個名為 Sticky 的 CSS 類，使其固定在螢幕頂部。否則，它會刪除該類，讓 div 返回其原始位置。

對應的 CSS 類別定義如下圖：

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

以上是如何使 Div 粘在滾動上：固定定位和事件處理指南？的詳細內容。更多資訊請關注PHP中文網其他相關文章！