如何使用 CSS 將 Div 固定在滾動時視窗的頂部？

使用 CSS 修復滾動上的 Div

您的問題涉及使 div 在滾動到它後保持固定。如您所提到的，只需將position:fixed套用至div就會使其出現在頁面上應有的位置之前。

幸運的是，CSS的進步現在允許此功能：

div {
  position: sticky;
  top: 0;
}

黏性位置屬性可確保div 在到達視窗頂部後保持固定，類似於9gag 上第二個廣告的行為方式。

jQuery 替代方案

為了相容性對於較舊的瀏覽器，這是原始的 jQuery 方法：

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  var divOffset = $('.fixme').offset().top;

  if (scrollTop >= divOffset) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

以上是如何使用 CSS 將 Div 固定在滾動時視窗的頂部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！