固定 Div 时保持页面布局

Question

我有 3 个位于彼此下方的 div。当中间 div 滚动到视图中时，它将被固定 800 毫秒，然后恢复为静态定位。

在 800 毫秒期间；中间 div 已正确固定，但最后一个 div 改变了位置 - 它不是停留在中间 div 下方，而是弹出并位于第一个 div 下方。当 800 毫秒的时间结束后，一切都会回到正常位置。

如何使最后一个 div 在中间 div 固定的情况下保持其在中间 div 下方的位置？

希望，这是有道理的。我创建了一个 JSFiddle 来演示错误：JSFiddle

<!-- Each div has a height of 900px -->
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<!-- When this scrolls into view it will become fixed for 800ms. 
     This is when div no. 3 pops up underneath div1 instead of 
     maintaining its position -->
<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Answer 1

这是有道理的。您的第二个 div 定位固定为 800 毫秒。也就是说，它对相对于滚动条移动的其他潜水没有影响。因此，您的第三个 div 会忽略固定定位的元素。

像往常一样有很多解决方案。最好和最简单的方法是在第三个 div 之前使用相同的 800 毫秒的不可见 div。只需让它显示块和高度等于你的第二个 div。 800 毫秒后显示：无；。它将帮助您将 3dr div 保持在您想要的位置。你的小提琴不起作用，所以我无能为力。

Answer 2

只需将下面的 css 用于这 800 毫秒，然后恢复为 position:static

CSS

#target+div{
margin-top:900px; 
}