Skrollr - 如何到達頂部OT窗口

當我嘗試使用Skrollr（JavaScript庫），使我的網站停止DIV停止滾動：http://prinzhorn.github.io/skrollr/Skrollr - 如何到達頂部OT窗口

的scrollr工作正常，但我不能找出一個事情。如何阻止div從屏幕的頂部進一步滾動。一旦div頂部達到我的頁面頂部，我希望它停止滾動，以便當第二個div開始在它的頂部時，它會給出堆疊卡的感覺。

當滾動回來時，在頂部的頁面離開頁面底部之後，div將開始滾動。

我希望我的解釋有點清楚，如果不是，我會嘗試解釋使用圖形。

現在的代碼部分。閱讀文檔後，我想這兩個：

data-top 和 data-end 他們沒有實際工作。

我也試過： data-top="background-position:0px 0px;"

我甚至不知道如果我想實現是可以或不可以。

如果不是，可以通過降低滾動速度來重疊垂直滾動，在div頂部穿過瀏覽器窗口頂部之後。

請問我是否有任何解釋令人困惑，我知道口頭解釋問題並不容易。

來源

2013-05-04 ssdesign

skrollr不會做任何魔術，只是CSS。如果你想讓div停止，那麼找一種方法來使用CSS來做到這一點。通常這是使用固定定位完成的。

像這樣（沒有測試，但應該給你的想法）

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

現在可能會出現一個問題。以下所有元素將向上移動，因爲該元素已從流中移出。您可以使用虛擬元素或margin-top或top（具有相對定位）以及指向該元素的data-anchor-target來解決此問題。

來源

2013-05-05 11:53:36 Prinzhorn

如果我這樣做，我的股利跳回到原來的位置，並不堅持頁面的頂部。還有什麼我需要做的，以使其堅持頂部？ – ssdesign 2013-05-08 09:51:43

'top：0;'在你的CSS中 – Prinzhorn 2013-05-08 19:29:38

只需指定希望它通過兩個數據點（滾動距離）保持頂部的時間段並保持頂部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-23 15:34:27

*旁註：*在CSS中，值'0'沒有單位。 – Raptor 2013-07-15 02:46:00

旁註：在skrollr中的css值爲0需要有一個單位;特別是與您在相應數據屬性中使用的單位相匹配的單位（例如0px - > 100px或0％ - > 100％）。「所有的數值必須有相同的單位，即使是0也需要一個單位，不可能從5％到100px設置動畫，skrollr不會抱怨，但結果是不確定的。從文檔https://github.com/Prinzhorn/skrollr – Floyd 2013-10-26 02:46:54

Skrollr - 如何到達頂部OT窗口

回答

相關問題