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/

使用skrollr滚动时将div修复到底部

1 个答案: