如何创建一个粘在屏幕顶部的滚动 Div？

创建一个粘在屏幕顶部的滚动 Div

当您希望元素保持锚定在屏幕顶部时，即使页面滚动时，您可以创建一个“粘性”div。方法如下：

使用纯 CSS：

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

使用 jQuery 的替代方法：

使用 jQuery，您可以以更大的灵活性达到相同的效果。按如下方式定位元素：

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

然后，使用 JavaScript 检测滚动偏移：

$(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': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

一旦滚动偏移超过指定值（本例中为 200px），div将固定在屏幕顶部。当滚动偏移量低于该值时，它将返回到其初始位置。

以上是如何创建一个粘在屏幕顶部的滚动 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！