如何讓div在滾動時固定在螢幕頂部？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-12-16 22:54:11

原創

816 人瀏覽過

How to Keep a Div Fixed at the Top of the Screen on Scroll?

在滾動時固定Div 的位置在屏幕頂部

創建一個粘在屏幕頂部一次的div它滾動到，你可以利用它滾動到，你可以利用CSS的position屬性。考慮以下 CSS 片段：

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

登入後複製

編輯：

為了確保元素正確粘貼，它最初應該將其位置設為絕對。一旦文件的捲動偏移量到達元素的頂部邊界，您可以動態地將其位置變更為固定並將其 top 屬性重設為 0。

以下 JavaScript 程式碼片段示範如何使用scrollTop 函數實現此目的：

$(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'});
  }
});

登入後複製

當滾動偏移超過200像素時，元素將固定在瀏覽器視窗的頂部。

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