Javascript 将元素粘贴到页面顶部，直到出现该类型的下一个元素

我很难很好地描述这一点，但请容忍我：

如果我有这样的页面结构

<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>

第1章
大量具有多个屏幕内容价值的文本

第二章
大量的文本

我希望将“第1章”绝对定位在页面顶部，直到用户向下滚动到“第2章”开始的位置，此时“第2章”显示在页面顶部

---

如果需要，我们可以添加包装类和div。使用JQuery的解决方案将非常好。

如果我理解正确，您希望类似于Google的图像分页功能，对吗？它会在顶部显示当前页面，直到下一页滚动过去，然后成为新页面

---

您要做的是，当用户滚动时，检查H2元素的位置，如果它小于其父容器的scrolltop，则使其文本成为位于顶部绝对位置元素中的文本的候选。一旦你点击了一个不在循环中的否定分界的H2，并将文本添加到绝对定位元素中。

你可以创建一个始终位于屏幕顶部的div，并在检测到用户已滚动过去时将标题克隆到其中。请参阅正在运行的演示：

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());
});

---

@qwertyrmk，哪一部分？我想我已经在我的描述和评论中解释过了，但我还有一个尝试。。。如果第一个

语句很简单，它只确保
#sticky
div在页面上。
each
循环从头到尾遍历页面上的每个
h2
，但忽略了我们克隆到sticky div中的（潜在的）
h2
。当它到达超过窗口当前滚动位置的
h2
时，它退出循环（
return false
）。因此，最后遇到的
h2
应该是显示在sticky div中的那一个。这正是我要找的。
#sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
}