如何使用 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中文网其他相关文章！