Question

我正在尝试理解Skrollr javascript脚本库，并且很难理解数据值，以及它们在绝对值和相对值之间的差异。

我在div上有一个背景图像（大约比div高2倍），当我向下滚动页面时，我想向下滚动。这是我到目前为止所拥有的。

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

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

Answer 1

The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:

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

At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.

Regarding data-top, the readme on the skrollr repo says the following:

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

I don't however see anything about data-bottom in the docs. I only see:

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

So you might try:

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

Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.

Answer 2

Skrollr.js需要一个包含两个值的数据属性。第一个描述了视口的对齐方式。第二个是元素的边缘（或中心）。它可能有点令人困惑，两者都以相同的方式命名（顶部，中间或底部）。

您可以使用百分比值进一步定位背景。这样skrollr就可以在值之间转换。

请参阅此示例。 https://jsfiddle.net/4frjantk/

<div class='section' 
    data-bottom-top="background-position: 50% 100%" 
    data-top-bottom="background-position: 50% 0%" >
</div>

PS：该示例包含100％高度的容器的变通方法，如https://github.com/Prinzhorn/skrollr/issues/347

所述

了解Skrollr数据值

2 个答案: