固定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定位固定為800ms。 這對其他相對於滾動條的下潛沒有影響。因此，您的第3個div排在最前面，忽略了固定位置的元素。

和往常一樣，有很多解決方案。 最好和最簡單的方法是在第3個div之前的800毫秒內使用不可見的div，只需使其顯示塊和高度等於您的第2 div。 800ms后使其顯示：none;。 這將幫助您將3dr div保持在所需位置。 你的小提琴不起作用，所以我不能幫助你。

Answer 2

只需在800ms內使用以下CSS，然后返回到position:static

的CSS

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