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

使Div 捲動到螢幕頂端

簡介：
想要建立一個div滾動時保持固定滾動在螢幕頂部是常見的網頁設計要求。此功能可以透過多種方法實現，包括 CSS 定位和 JavaScript 操作。

CSS 定位：
一種簡單的方法是在CSS 中使用固定定位：

.fixedElement {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

使用此CSS，無論如何，元素都將保持在相對於螢幕的相同位置。但是，如果元素需要根據滾動位置動態更改其位置，則此方法可能不適合。

JavaScript 操作：
建立一個黏在頂部的 div只有當它已經捲動到時，才可以使用CSS和JavaScript的組合。這個想法是一旦元素達到某個滾動偏移量，就將元素的位置從絕對位置更改為固定位置：

$(window).scroll(function(e) {
  var $el = $('.fixedElement');
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed) {
    $el.css({'position': 'fixed', 'top': '0px'});
  }
  if ($(this).scrollTop() < 200 && isPositionFixed) {
    $el.css({'position': 'static', 'top': '0px'});
  } 
});

在此代碼中：

• $ el 表示具有該類別的元素'fixedElement'.
• isPositionFixed檢查元素是否已固定在
• 當滾動偏移（由 $(this).scrollTop() 確定）達到 200px 並且元素不固定時，將其設置為固定並定位在頂部。
• 當滾動偏移量低於 200px 並且元素被固定時，它會重置到其原始位置。

這種方法提供了靈活性根據滾動行為動態調整元素的位置。

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