如何使 Div 滾動經過後仍停留在螢幕頂部？

滾動過去式將Div 錨定到螢幕頂部

在開發互動網頁時，通常需要有跟隨使用者的元素滾動，尤其是到達特定部分時。其中一個場景涉及位於頁面頂部附近的 div，但在滾動過去時應「緊貼」螢幕。

解決方案

要實現此效果，需要使用創意組合採用了 JavaScript 和 CSS。位置：固定樣式套用於 div，但僅在使用者捲動經過它之後。

以下是實作它的方法：

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

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

此 JavaScript 程式碼將事件處理程序新增至window.scroll事件，監視捲動位置。當滾動超過 div (elTop) 的初始位置時，將向其新增「黏性」CSS 類別。類別包含以下 CSS 樣式：

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

因此，div 假定固定位置，並且只要保持滾動過去，就會保持在頁面頂部。當使用者滾動回頂部時，黏性類別將被刪除，並且 div 返回其原始位置。

此解決方案結合了 JavaScript 和 CSS 的強大功能，透過保持無論頁面的滾動位置如何，重要元素都觸手可及。

以上是如何使 Div 滾動經過後仍停留在螢幕頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！