我很难给出一个好的描述,但请耐心听我说:
如果我有一个像这样结构的页面
<h2>Chapter 1</h2>
<p>Lots of text that has mutiple screen worths of content</p>
<h2>Chapter 2</h2>
<p>Lots of text...</p>
我希望将“第一章”绝对定位在页面顶部,直到用户向下滚动到“第二章”开始的位置,此时“第二章”将显示在页面顶部。如果需要,我们可以添加包装类和div。使用JQuery的解决方案是很好的选择。
if
语句很简单,它只是确保#sticky
div在页面上。each
循环从开始到结束遍历页面上的每个h2
,但忽略我们克隆到粘性div中的(可能的)h2
。当它到达窗口当前滚动位置之后的h2
时,它退出循环(return false
)。因此,最后遇到的h2
应该是显示在粘性div中的那个。 - David Tang