Skrollr - 如何在到达顶部窗口时停止 div 停止滚动

ssd*_*ign 5 javascript parallax

我正在尝试使用 Skrollr(javascript 库)制作我的网站:http ://prinzhorn.github.io/skrollr/

滚动条工作正常,但我无法弄清楚一件事。如何阻止 div 远离屏幕顶部滚动。一旦 div 的顶部碰到我的页面的顶部,我希望它停止滚动,这样当第二个 div 开始出现在它的顶部时,它就会给人一种堆叠卡片的感觉。

当向后滚动时,div 将在顶部离开页面底部后开始滚动。

我希望我的解释清楚一点,如果不是,我将尝试使用图形来解释。

现在是代码部分。阅读文档后,我尝试了以下两种方法:

data-topdata-end 他们没有实际工作。

我也试过: data-top="background-position:0px 0px;"

我什至不确定我想要实现的目标是否可能。

如果没有,我可以通过在 div 顶部穿过浏览器窗口顶部后降低滚动速度来进行重叠垂直滚动。

请问我是否有任何解释令人困惑,我知道口头解释问题并不容易。

Pri*_*orn 4

skrollr 不做任何魔法,只是 CSS。如果您希望 div 停止,请使用 CSS 找到一种方法。通常这是使用固定定位来完成的。

像这样(未经测试,但应该给你这个想法)

<section data-0="position:static;" data-top="position:fixed;"></section>
Run Code Online (Sandbox Code Playgroud)

现在可能会出现一个问题。接下来的所有元素都会向上移动,因为该元素已从流中取出。例如,您可以使用虚拟元素或margin-toptop(具有相对定位)结合data-anchor-target指向元素来解决此问题。