Question

让我们说我想设计一个有四张幻灯片的网站。当访问者滚动时，我希望每张幻灯片都覆盖前一张幻灯片。以下是stellar.js（jquery插件）的尝试： http://jsfiddle.net/8mxugjqe/ 。您可以看到它适用于第一张幻灯片，第二张幻灯片已被第二张幻灯片覆盖，但我无法让其他幻灯片工作。

HTML：

<body>
    <div id="one" data-stellar-ratio=".2">
        <p>This is the first div.</p>
    </div>
    <div id="two" data-stellar-ratio="1">
        <p>This is the second one.</p>
    </div>
    <div id="three">
        <p>Third one!</p>
    </div>
    <div id="four">
        <p>Fourth and last.</p>
    </div>
</body>

CSS：

* {
    margin: 0;
    padding: 0;
}
#one, #two, #three, #four {
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 5em;
}
p {
    margin: 1em;
    width: 60%;
}
#one {
    background: red;
}
#two {
    background: blue;
    top: 100%;
}
#three {
    background: green;
    top: 200%;
}
#four {
    background: yellow;
    top: 300%;
}

Answer 1

我只能使用jQuery而不是其他库来抛出一些东西。它依赖于relative定位。基本上，一切都正常滚动，直到其中一个幻灯片到达浏览器窗口的顶部。一旦它试图滚过浏览器窗口的顶部，我就会在幻灯片的垂直位置添加一个偏移量，以防止它向上移动。当向后滚动时，我只是从这个偏移中减去，直到它达到0，此时它开始正常滚动。

我确信代码可以清理，但我添加了大量的评论，所以希望它是可读的。如果您有任何问题，或者您希望我修改它以更好地满足您的需求，请告诉我。这是我提出的解决方案的小提琴：

http://jsfiddle.net/jwnace/jhxfe2gg/

您还可以在此处查看相同代码的整页演示：

http://joenace.com/slides/

堆栈的幻灯片不断增长

1 个答案: