Javascript 不断增长的幻灯片堆
假设我想设计一个有四张幻灯片的网站。我希望在访问者滚动时，每张幻灯片都能覆盖上一张幻灯片。下面是对Javascript 不断增长的幻灯片堆,javascript,css,stellar.js,Javascript,Css,Stellar.js,假设我想设计一个有四张幻灯片的网站。我希望在访问者滚动时，每张幻灯片都能覆盖上一张幻灯片。下面是对stellar.js（jquery插件）的一次尝试：。您可以看到，它适用于第一张幻灯片，第二张幻灯片涵盖了这一点，但我无法让它适用于其他幻灯片 HTML: 我能够仅使用jQuery而不使用其他库来组合一些东西。它依赖于相对定位。基本上，所有内容都会正常滚动，直到其中一张幻灯片到达浏览器窗口的顶部。一旦它试图滚动过浏览器窗口的顶部，我会向幻灯片的垂直位置添加一个偏移，以防止它再向上移动。当以另一种方
stellar.js我能够仅使用jQuery而不使用其他库来组合一些东西。它依赖于相对定位。基本上，所有内容都会正常滚动，直到其中一张幻灯片到达浏览器窗口的顶部。一旦它试图滚动过浏览器窗口的顶部，我会向幻灯片的垂直位置添加一个偏移，以防止它再向上移动。当以另一种方式向后滚动时，我只需从该偏移量中减去，直到它达到0，此时它开始再次正常滚动 我确信代码可以被清理，但我添加了大量注释，希望它可读。如果您有任何问题，或者您希望我修改它以更好地满足您的需要，请告诉我。下面是我提出的解决方案： 您还可以在此处看到相同代码的完整页面演示：
数据恒星比率属性只控制元素滚动的速度。值
1.2数据恒星比率数据恒星垂直偏移<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>
* {
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%;
}