javascript - 滚动到屏幕顶部后，如何使 div 贴在屏幕顶部？

Question

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

Answer 1

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

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

编辑:你应该有绝对位置的元素，一旦滚动偏移到达元素，它应该被改为固定，顶部位置应该设置为零。

您可以使用 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 时，元素会粘到浏览器窗口的顶部，因为它是固定放置的。