固定元素是页面上不会滚动到视图外的元素。换句话说，它粘在可见区域（视口或滚动框）。您可以使用position使用CSS创建它：sticky; 。
它们在任何滚动之前就像相对位置的元素一样，并且一旦达到滚动阈值就像固定元素一样。目前，只有Firefox支持它。
html代码
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<div id="wrapper">
<div id="sticky">sticky</div>
</div>
<div class="extra"></div>
CSS代码
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 70px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra,
#wrapper {
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
@media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259370.html