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

我有一个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，高400px。当content divs滚动时，条形图和方形图将保持在顶部。但我想让square向上滚动内容div 1。因此，在ContentDiv1从页面完全向上滚动之后，square应该与ContentDiv1一起向上滚动，并且不再可见。我该怎么做

下面是两张图片，展示了我想说的话

当前

必需的

---

是小提琴。

写入位置：绝对未固定为红色

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

---

您只需将类为divb的块移动到类为content1的div中：

div style="width: 100%; position: fixed"></div>
<div style="position: fixed;" class="diva">blue</div>
<div class="content1" style="background-color: #3333FF"><div class="divb">red</div>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>

---

您可以这样做：

//get the height of the #top (I assigned #top id for one of your top divs)
var topHeight = $('#top').height() + 30;
//get all the top divs, it's better to wrap all the top divs in some container
//but you don't do that.
var topDivs = $('#top, .diva, .divb');
//handle the onscroll event
$(window).scroll(function(e){
  var rect1 = $('.content1')[0].getBoundingClientRect();
  if(rect1.bottom <= topHeight){
    topDivs.css('top', rect1.bottom < 0 ? -topHeight : rect1.bottom - topHeight);
  } else topDivs.css('top', 0);    
});

我们只是为顶部div添加一些过渡属性来设置过渡动画。这是演示

---

你说绝对定位，但定位固定？？？先生，我已经检查过了，这很好。。您可以检查@blasteralfredψ，它在开始时与内容1一起移动。我不想那样。它应该与内容1的底部一起移动。参考我附加的截图。参考我附加的截图。