固定位于顶部div和页脚之间的侧边栏

Question

我想制作固定定位的侧面div，它应该在用户滚动到达第二节时才开始表现固定，它实际存在并且应该保持固定直到用户滚动到达页脚。代码也应该响应。固定div在响应（移动布局）中不可见。

.fixed-div {
  position: fixed;
}

<div style="background:pink;height:50px;color:white;" class="header">
  i am header
</div>
<div style="background:black;height:600px;color:white;" class="top">
  top section
</div>
<div style="display:flex;">
  <div style="width:40%;background:red;" class="fixed-div">
    i am left fixed div
  </div>
  <div style="width:60%;background:yellow;margin-left:auto;">
    <div style="height:70%;">i am right 1st div</div>
    <div style="height:70%;">i am right 2nd div</div>
    <div style="height:70%;">i am right 3rd div</div>
    <div style="height:70%;">i am right 4th div</div>
  </div>

</div>

<div style="background:black;height:500px;color:white;" class="header">
  i am footer
</div>