给导航写了 position: sticky，滚动时却跟着内容一起走。多数不是属性不支持，而是生效条件被打断。
四个断点
- 没有写 top。粘性定位需要阈值，top 取 0 才会在滚动到顶部时粘住。
- 阈值写成百分比。百分比对粘性阈值无效，行为不确定，用具体长度。
- 祖先存在 overflow。最近的可滚动祖先被截断时，粘性元素找不到滚动容器，效果丢失。
- 祖先存在 transform 或 filter。这类属性会改变定位基准，粘性表现随之异常。
最小写法
.site-nav {
position: sticky;
top: 0;
z-index: 10;
background: #ffffff;
}背景色必须显式设置，否则滚动时下层内容会透过导航显示出来。
与 fixed 的差别
| 维度 | sticky | fixed |
|---|---|---|
| 占据空间 | 保留原位 | 脱离文档流 |
| 作用范围 | 只在父容器内有效 | 相对视口始终有效 |
| 内容遮挡 | 不需要预留空间 | 需要给内容补上占位 |
导航位于页面顶部时，sticky 与 fixed 的效果接近；导航在中部出现时，sticky 更稳，不需要预留占位高度。
检查顺序
- 确认 top 取值为具体长度。
- 向上逐级查看是否存在 overflow 截断。
- 确认祖先没有 transform 与 filter。
- 确认父容器高度足够让导航产生位移。