如何让div在滚动时固定在屏幕顶部？-css教程-PHP中文网

如何让div在滚动时固定在屏幕顶部？

Linda Hamilton

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

原创

815 人浏览过

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