### [sticky 吸顶不生效：四个常见断点](https://www.huociguo.com/article/1700)

**Published:** 2026-10-02T04:05:59

**Author:** 米了

**Excerpt:** 给导航写了 ，滚动时却跟着内容一起走。多数不是属性不支持，而是生效条件被打断。粘性定位的生效条件由祖先链决定四…

给导航写了 `position: sticky`，滚动时却跟着内容一起走。多数不是属性不支持，而是生效条件被打断。

![笔记本键盘特写](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-10843996.jpeg)

粘性定位的生效条件由祖先链决定

## 四个断点

1.  没有写 top。粘性定位需要阈值，top 取 0 才会在滚动到顶部时粘住。
2.  阈值写成百分比。百分比对粘性阈值无效，行为不确定，用具体长度。
3.  祖先存在 overflow。最近的可滚动祖先被截断时，粘性元素找不到滚动容器，效果丢失。
4.  祖先存在 transform 或 filter。这类属性会改变定位基准，粘性表现随之异常。

## 最小写法

```
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
}
```

背景色必须显式设置，否则滚动时下层内容会透过导航显示出来。

## 与 fixed 的差别

| 维度  | sticky | fixed |
| --- | --- | --- |
| 占据空间 | 保留原位 | 脱离文档流 |
| 作用范围 | 只在父容器内有效 | 相对视口始终有效 |
| 内容遮挡 | 不需要预留空间 | 需要给内容补上占位 |

导航位于页面顶部时，sticky 与 fixed 的效果接近；导航在中部出现时，sticky 更稳，不需要预留占位高度。

## 检查顺序

-   确认 top 取值为具体长度。
-   向上逐级查看是否存在 overflow 截断。
-   确认祖先没有 transform 与 filter。
-   确认父容器高度足够让导航产生位移。

**Tags:** sticky粘性定位, 吸顶导航, 容器滚动, 滚动上下文, 粘性阈值

**Categories:** HTML5

---