不断增长的幻灯片堆栈答案

【问题标题】：Stack of slides continuously growing不断增长的幻灯片堆栈
【发布时间】：2014-11-04 15:17:01
【问题描述】：

假设我想设计一个有四张幻灯片的网站。我希望每张幻灯片在访问者滚动时覆盖前一张。以下是 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%;
}

【问题讨论】：

data-stellar-ratio 属性只控制元素滚动的速度。 1 的值表示元素将以正常速度滚动，.2 的值表示元素将以正常速度的 20% 滚动，等等。我不认为你可以用这个来实现你在找什么。基本上，您需要滚动每张幻灯片，直到它到达浏览器窗口的顶部，然后停止滚动。您可能可以使用 stellar 和一些 jQuery 以编程方式修改 data-stellar-ratio 值来实现这一点。
看起来data-stellar-vertical-offset 属性可以帮助我实现我想要的，但你可能是对的。事实上，stellar.js 只是一个例子。我对其他技术持开放态度。这也是我最初没有添加 stellar.js 作为标签的原因（后来 j08691 添加了它）。

标签： javascript css stellar.js

【解决方案1】：

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

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

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

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

http://joenace.com/slides/

【讨论】：

这正是我想要实现的。我认为代码可以更紧凑，但作为初学者，我非常感谢您的 cmets 和解释。
此外，Android 上的 Chrome 似乎会干扰 javascript，从而阻止平滑滚动。也许您知道为什么会这样以及如何解决它？
感谢您的反馈。我将在 Chrome for Android 上对其进行测试，看看我能找到什么。到目前为止，我只在 Chrome、FF 和 IE for Windows 上对其进行了测试。
我刚刚在 Chrome for Android 上进行了测试，我想我明白你的意思了。你是在说它看起来有点紧张，就像文字在跳来跳去吗？我不确定对此能做些什么，但我会尝试一下，看看能不能解决它。
是的，我指的是这个。