滚动到后，如何使div停留在屏幕顶部？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想创建一个div，它位于内容块的下方，但是一旦页面滚动到足以接触其顶部边界的位置，它就会固定在适当的位置并随页面滚动。

回答：

您可以简单地使用css，将元素定位为fixed：

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

您应该将元素的位置设为绝对，一旦滚动偏移量到达该元素，则应将其更改为fixed，并将顶部位置设置为零。

您可以使用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停留在屏幕顶部？ 的全部内容， 来源链接： utcz.com/qa/408699.html

回到顶部