javascript - 如何在页面滚动到固定级别后向上滚动特定的div？

Question

我有一个如下所示的 HTML；

<div style="width: 100%; position: fixed"><div class="divb">red</div></div>
<div style="position: fixed;" class="diva">blue</div>
<div class="content1" style="background-color: #3333FF">content</div>
<div class="content2" style="background-color: #FF3300">content</div>
<div class="content3" style="background-color: #006600">content</div>
<div class="content4" style="background-color: #660099">content</div>

顶部有一个长条，中间有一个正方形。两者都绝对有能力保持领先地位。我在它们下面有 4 个 div，每个 div 一个接一个地级联，400px 宽和高。当内容 div 滚动时，条形和方形将保留在顶部。但我希望正方形与内容分区 1 一起向上滚动。因此在内容分区 1 从页面完全向上滚动后，正方形应该与内容分区 1 一起向上滚动，并且不应再可见。我该怎么做？

下面两张图片展示了我想说的；

当前

必需

Here是 fiddle 。

Answer 1

写position:absolute不固定为红色

<div style="width: 100%; position: absolute "><div class="divb">red</div></div>