如何在滚动时将 Div 固定到屏幕顶部？-js教程-PHP中文网

如何在滚动时将 Div 固定到屏幕顶部？

Susan Sarandon

发布： 2024-11-11 22:52:02

原创

403 人浏览过

How to Fix a Div to the Top of the Screen on Scroll?

在滚动时将 Div 固定到屏幕顶部

在网页上定位元素可以增强用户体验和组织。一种常见的情况是当 div 到达某个滚动点时将其固定在屏幕顶部。

要实现此目的，有多种方法，其中之一涉及专门使用 CSS。通过将元素的位置设置为固定，一旦滚动到以下位置，它将保持锚定在屏幕顶部：

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

登录后复制

但是，此方法假设元素最初是绝对定位的。当满足所需的滚动偏移量时，其位置应更改为固定，并且 top 属性应重置为零。要确定滚动偏移量，可以使用 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 像素时，元素会过渡到顶部的固定位置屏幕的。当偏移量低于 200 像素时，元素将恢复到之前的位置。当用户滚动页面时，此技术允许 div 平滑过渡。

以上是如何在滚动时将 Div 固定到屏幕顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！