我想创建一个位于内容块下方的 div,但是一旦页面滚动到足以接触其顶部边界,它就会固定在适当的位置并随页面滚动。
您可以简单地使用 css,将您的元素定位为固定:
.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 时,该元素将 粘 在浏览器窗口的顶部,因为它是固定放置的。