position:sticky;
拉动滚动条当盒子到了设定的偏移量时就会像固定定位一样。
<body>
<div class="nav">
<div class="sticky">我是粘性定位</div>
</div>
</body>
<style>
body {
height: 2000px;
}
.nav {
width: 100%;
height: 100%;
display: flex;
align-items: center;
text-align: center;
line-height: 40px;
justify-content: center;
}
.sticky {
width: 80%;
height: 40px;
background: red;
position: sticky;
top: 40px;
}
</style>