在使用skrollr滾動時，將底部固定在底部

Question

我試圖使用Skrollr將元素固定到視口的底部，如果元素的底部碰到視口底部。這部分沒有問題。

問題是，滾動後 - 讓我說1000px - 我想繼續滾動，而我改變上述固定的元素再次靜態。

<div class="header">Header</div> 
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div> 
<div id="fixed-element" data-0="@class:;" data-bottom="@class:stuck;" data-1000="@class:;">Fixed at the bottom for a while</div> 
<div class="content"> 
    Regular content...<br> 
</div> 

http://jsfiddle.net/bkccg8x5/2/

所以我的想法是建立在固定元件上的佔位符，當固定件粘到了谷底，我只需添加這個元素，所以當我抓狂的固定元素，它會繼續正常滾動而不會跳躍。

這個解決方案的問題是我爲佔位符定義了一個固定的高度，這樣它將只能在某個視口高度上正確工作。使事情變得更加複雜，網站上的每個元素都有一個流體高度，所以我需要一個可以在每個分辨率下工作的解決方案。

任何想法？

Answer 1

我通過創建一個1000px高的容器解決了這個問題，當容器的底部碰到視口的底部時，我將固定元素更改爲絕對。

<div class="header">Header</div> 
<div id="height-placeholder" data-0="@class:;" data-bottom="@class:unstuck;"> 
    <div id="fixed-element" data-0="@class:;" data-bottom="@class:stuck;">Fixed at the bottom for a while</div> 
</div> 
<div class="content"> 
    Regular content...<br> 
</div> 

這裏是演示，正常工作與任何高度：

http://jsfiddle.net/bkccg8x5/3/