瞭解Skrollr數據值

Question

我想了解Skrollr javascript腳本庫，並且難以理解數據值，以及它們在絕對和相對之間的差異。

我有一個div的背景圖片（大約比div高兩倍），我想向下滾動頁面。這是我到目前爲止。

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

什麼是數據頂端和數據底端？就像我可以從文檔中得出的那樣，data-top是div #jumbotron的頂部。我想要的是當#jumbotron位於視口的頂部時，背景位置在右下角。然後，當我滾動並且#jumbotron的底部到達視口的頂部時，我希望背景圖像位於頂部。這沒有發生。我究竟做錯了什麼？

Answer 1

skrollr庫將根據元素的數據元素轉換元素上的CSS。例如，如果你有一個元素如下：

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

在滾動位置0（用戶沒有滾動），該元素的透明度將是1.當用戶滾動100px的頁面向下，元素將會消失爲不透明度0.您可以根據需要添加儘可能多的數據增量。

關於數據上面，在skrollr repo自述說以下內容：

數據頂部：當元素的頂部與 視

我的頂部對齊但不要在文檔中看到關於數據底部的任何內容。我只看到：

數據上下：當元素的底部是在視口的頂部（它只是不可見）。

所以，你可以嘗試：

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

只是認爲第一個數據是你的起點，最終的數據是你的終點，沿爲你需要的方式儘可能多的增量。

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