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>

我希望将“第1章”放在页面顶部或页面顶部的任何位置，直到用户向下滚动到“第2章”开始的位置，此时现在“第2章”显示在页面顶部页面。

如果需要，我们可以添加包装类和div。使用JQuery的解决方案会很棒。

Answer 1

您可以创建一个始终位于屏幕顶部的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;
}

Answer 2

如果我理解正确，你想要类似Google的图片分页吗？显示当前页面的位置，直到下一页滚动过去，然后成为新页面。

你想要做的是当用户滚动时，检查以查看H2元素的位置，如果它小于它的父容器的滚动顶部，则使其文本成为其中的文本的候选者。绝对定位的元素在顶部。一旦你点击不在循环中的负面突破的H2并将文本添加到绝对定位的元素。

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

2 个答案: