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

时间:2016-06-25 13:11:13

标签: javascript html css

我想制作固定定位的侧面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>

0 个答案:

没有答案