Question

我正在尝试使用Skrollr（javascript库）创建我的网站：http://prinzhorn.github.io/skrollr/

滚动条工作正常，但我无法找出一件事。如何阻止div滚动远离屏幕顶部。一旦div的顶部击中我的页面顶部，我希望它停止滚动，这样当第二个div开始在它上面时，它给出了叠卡的感觉。

当向后滚动时，div会在顶部的那个离开页面底部后开始滚动。

我希望我的解释有点清楚，如果不是，我会尝试解释使用图形。

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

data-top 和 data-end 他们都没有工作。

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

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

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

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

Answer 1

skrollr没有任何魔法，只有CSS。如果你想让div停止，那么找一个使用CSS做到这一点的方法。通常这是通过固定定位完成的。

喜欢这个（没有经过测试，但应该给你一个想法）

<section data-0="position:static;" data-top="position:fixed;"></section>

现在可能会出现一个问题。以下所有元素都将向上移动，因为元素已从流中取出。您可以使用虚拟元素或margin-top或top（具有相对定位）以及指向元素的data-anchor-target来解决此问题。

Answer 2

只需指定两个数据点（滚动距离）保持在顶部的时间段，并保持顶部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;">

Answer 3

为父div添加高度并使用CSS3 position：sticky属性。平滑滚动：）

<section id="" style="height: 6200px">
    <div id="skrollr-body" class="main-container" data-0="position:sticky;" data-900="position:sticky;" style="width: 100%;max-width: 100%;top:50px">
      Content
    </div>
  </section>

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

3 个答案: