将元素固定在页面顶部，直到下一个相同类型的元素出现

Question

我很难给出一个好的描述，但请耐心听我说：

如果我有一个像这样结构的页面

<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的解决方案是很好的选择。

- Aaron Yodaiken

Answer 1

不要改变标题的位置，你可以创建一个始终在屏幕顶部的div，并在检测到用户滚动过去时将标题克隆到该div中。查看工作演示：http://jsfiddle.net/8sANt/

JS：

$(document).scroll(function () {
    var sticky = $('#sticky'), h2 = $('h2:first');

    if (!sticky.length)
        sticky = $('<div id="sticky">').appendTo('body');

    $('h2').each(function () {
        if ($(this).parents('#sticky').length) return; // Ignore cloned headings
        if ($(this).offset().top > $(window).scrollTop())
            return false; // Exit loop
        h2 = $(this);
    });

    sticky.empty().append(h2.clone());
});

CSS：

#sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
}

- David Tang

---

@qwertyrmk，哪一部分？我认为我已经在我的描述和评论中解释了，但我会再试一次...第一个if语句很简单，它只是确保#sticky div在页面上。each循环从开始到结束遍历页面上的每个h2，但忽略我们克隆到粘性div中的（可能的）h2。当它到达窗口当前滚动位置之后的h2时，它退出循环（return false）。因此，最后遇到的h2应该是显示在粘性div中的那个。 - David Tang

Answer 2

如果我理解正确，您想要类似于Google图像分页的功能，对吗？它会在顶部显示当前页面，直到下一页滚过来并成为新页面。

您想要做的是，在用户滚动时，检查H2元素的位置，如果它小于其父容器的滚动位置，则将其文本作为可能成为绝对定位元素顶部的文本的候选项。一旦您遇到不在负数中的H2，则退出循环并将文本添加到绝对定位元素中。

- JaredMcAteer

---

这正是我正在寻找的。 - Aaron Yodaiken