javascript Skrollr - 如何在到达顶部窗口时停止 div 停止滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16377868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Skrollr - How to stop the div stop scrolling when reaching top ot window
提问by ssdesign
I am trying to make my website using Skrollr (javascript library): http://prinzhorn.github.io/skrollr/
我正在尝试使用 Skrollr（javascript 库）制作我的网站：http://prinzhorn.github.io/skrollr/
The scrollr works fine, but I am not able to figure out one thing. How do I stop a div scrolling further away from the top of the screen. Once the top of the div hits the top of my page, i want it to stop scrolling, so that when the second div starts coming on top of it, it gives the feeling of stacked cards.
滚动条工作正常，但我无法弄清楚一件事。如何阻止 div 远离屏幕顶部滚动。一旦 div 的顶部碰到我的页面的顶部，我希望它停止滚动，这样当第二个 div 开始出现在它的顶部时，它就会给人一种堆叠卡片的感觉。
And when scrolling back, the div will start to scroll after the one on top has left the bottom of the page.
当向后滚动时，div 将在顶部的那个离开页面底部后开始滚动。
I hope my explanation is a bit clear, if not I will try to explain using graphics.
我希望我的解释清楚一点，如果不是，我将尝试使用图形来解释。
Now the code part. After reading the documentation, I tried both these:
现在是代码部分。阅读文档后，我尝试了以下两种方法：
data-topand
data-endnone of them worked actually.
data-top和
data-end他们没有实际工作。
I also tried:
data-top="background-position:0px 0px;"
我也试过：
data-top="background-position:0px 0px;"
I am not even sure if what I want to achieve is possible or not.
我什至不确定我想要实现的目标是否可能。
If not, can I do overlapping vertical scrolling by reducing the scroll speed after the top of the div crosses the top of browser window.
如果没有，我可以通过在 div 顶部穿过浏览器窗口顶部后降低滚动速度来进行重叠垂直滚动。
Please ask me if any of my explanation is confusing, I know it's not easy to explain the problem verbally.
请问我的解释是否有任何令人困惑的地方，我知道口头解释这个问题并不容易。
回答by Prinzhorn
skrollr does not do any magic, just CSS. If you want the div to stop, then find a way to do this using CSS. Usually this is accomplished using fixed positioning.
skrollr 不会做任何魔法，只是 CSS。如果您希望 div 停止，请找到一种使用 CSS 执行此操作的方法。通常这是使用固定定位来完成的。
Like this (not tested, but should give you the idea)
像这样（未经测试，但应该给你这个想法）
<section data-0="position:static;" data-top="position:fixed;"></section>
Now one problem will probably occur. All the following elements will move up, because the element is taken out of the flow. You could solve this for example using a dummy-element or margin-topor top(with relative positioning) in conjunction with data-anchor-targetpointing to the element.
现在可能会出现一个问题。后面的所有元素都会向上移动，因为元素是从流中取出来的。例如，您可以使用虚拟元素或margin-top或top（具有相对定位）结合data-anchor-target指向元素来解决此问题。
回答by mike smith
Just specify the period for which you wish it to stay at the top by having two data points (scroll distances) and keep the top css the same.... see below.
只需通过两个数据点（滚动距离）指定您希望它保持在顶部的时间段，并保持顶部 css 相同......见下文。
First Card
<div id="image1" data-0="top:0px;" data-1000="top:1000px;" data-1500="top:1500px;">
Second card
<div id="image2" data-0="top:1500px;" data-1500="top:1500px;" data-2000="top:2000px;">
