需求:当页面很长,有滚动条时,需要固定页面上的部分元素,便于下方元素和上方固定元素的对照。
.box1{
width: 100%;
height: 50px;
background: skyblue;
}
.box2{
width: 100%;
height: 50px;
background: darkorange;
position: sticky;
top: 0;
}
.box3{
width: 100%;
/*height: 1000px;*/
}
<div class="box1">这是一行文字</div>
<div class="box2">这是要固定的部分</div>
<div class="box3">
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
<p>主题部分</p><br />
......
</div>