javascript - 了解 Skrollr 数据值

Question

我试图理解 Skrollr javascript 脚本库，但很难理解数据值，以及它们在绝对值和相对值之间的区别。

我在 div 上有一个背景图片(比 div 高大约 2 倍)，我想在向下滚动页面时向下滚动它。这是我目前所拥有的。

<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >

什么是数据顶部和数据底部？据我从文档中可以看出，data-top 是 div #jumbotron 的顶部。我想要的是当#jumbotron 位于视口(viewport)顶部时，背景位置在右下角。然后，当我滚动并且 #jumbotron 的底部到达视口(viewport)的顶部时，我希望背景图像位于右上方。这没有发生。我做错了什么？

Answer 1

skrollr 库将根据元素的数据元素转换元素上的 CSS。例如，如果您有一个元素如下:

<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>

在滚动位置 0(用户未滚动)，元素的不透明度将为 1。一旦用户向下滚动页面 100px，该元素将逐渐变为不透明度 0。您可以添加尽可能多的数据增量你想。

关于 data-top，自述文件在 skrollr repo说如下:

data-top: When the element's top is aligned with the top of the viewport

但是我在文档中没有看到任何关于数据底部的信息。我只看到:

data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).

所以你可以试试:

<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >

只需考虑第一个数据是您的起点，最终数据是您的终点，沿途可以根据需要增加任意数量的数据。