position:sticky 粘性定位
warning:
这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。
position: sticky 是 CSS 定位属性中的一个值。它的特点是 "sticky"，这意味着它既不是 relative 也不是 absolute，而是会在达到某个阈值时变为 fixed。
使用 position: sticky 时，你需要指定一个 top, bottom, left, 或 right 值，这个值定义了当元素达到这个位置时变为 sticky。
例如，如果你有一个头部导航，并希望在用户滚动页面时它首先固定在视口的某个位置，你可以这样做：
.nav {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 当向下滚动页面时，导航栏会在视口顶部固定 */
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="nav">我是固定在顶部的导航栏</div>
<p>滚动页面查看效果。</p>
<!-- 更多内容 -->当用户滚动页面时，.nav 元素会在到达视口顶部时变得固定，不会随着页面滚动而移出视口。这对创建一些“悬浮”效果或者提供一种“顶部固定”的导航栏是很有用的。
评论已关闭