5

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

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

并且在向后滚动时，div 将在顶部的 div 离开页面底部后开始滚动。

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

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

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

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

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

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

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

4

3 回答 3

4

skrollr 没有任何魔法，只有 CSS。如果您希望 div 停止，则使用 CSS 找到一种方法来执行此操作。通常这是使用固定定位来完成的。

像这样（未经测试，但应该给你的想法）

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

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

于 2013-05-05T11:53:36.837 回答
0

只需通过两个数据点（滚动距离）指定您希望它保持在顶部的时间段，并保持顶部 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;">
于 2013-05-23T15:34:27.170 回答
0

将高度添加到父 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>
于 2020-11-08T21:00:06.773 回答