假设我想设计一个有四张幻灯片的网站。当访问者滚动时，我希望每张幻灯片都能覆盖上一张幻灯片。以下是对 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%;
}
最佳答案
我能够仅使用 jQuery 而不使用其他库将一些东西放在一起。它依赖于 relative 定位。基本上，所有内容都会正常滚动，直到其中一张幻灯片到达浏览器窗口的顶部。一旦它试图滚动超过浏览器窗口的顶部，我就会在幻灯片的垂直位置添加一个偏移量，以防止它进一步向上移动。当以另一种方式向后滚动时，我只需从这个偏移量中减去，直到它达到 0，此时它开始再次正常滚动。
我确信代码可以被清理，但我添加了大量注释，希望它是可读的。如果您有任何问题或希望我对其进行修改以更好地满足您的需求，请告诉我。这是我想出的解决方案的 fiddle :
http://jsfiddle.net/jwnace/jhxfe2gg/
您还可以在此处查看相同代码的完整页面演示:
关于javascript - 不断增长的幻灯片堆栈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26738661/