sticky不生效的四大主因：一是祖先元素overflow:hidden/auto/scroll会禁用或限制粘性范围；二是height:100vh导致包含块无滚动；三是未设置top/bottom/left/right偏移值；四是父容器高度≤sticky元素自身高度。
父容器 overflow: hidden 导致 sticky 完全不生效
这是最隐蔽也最常踩的坑：只要 sticky 元素路径上任意一个祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，sticky 行为就会被静默禁用——不是“偶尔失效”，而是从一开始就不触发。
原因在于 sticky 的定位机制依赖最近的「可滚动容器」作为参考系；而 overflow: hidden 会切断滚动上下文，overflow: auto/scroll 虽然能滚动，但会把 sticky 锚定在该容器内部，而非视口。
- 检查 DOM 树中从 sticky 元素向上直到
的每一层，用浏览器开发者工具的「Computed」面板看overflow值 - 临时移除疑似父级的
overflow声明，观察 sticky 是否恢复 - 若必须保留滚动（如弹窗内局部滚动），则把 sticky 元素移出该 overflow 容器，或改用
position: fixed+ JS 动态计算位置
height: 100vh 强制截断导致 sticky 滚动一段后消失
当 sticky 元素的直接包含块（containing block）设了 height: 100vh，即使子内容撑高了整个页面，该容器也不会产生滚动条——浏览器认为“没有滚动发生”，sticky 的 top 条件无法持续满足，结果就是滚动到某处后突然回归文档流。
这不是兼容性问题，是规范行为：sticky 的粘性范围严格受限于其包含块的高度边界。
- 把
height: 100vh改成min-height: 100vh，允许容器随内容自然扩展 - 确保该容器本身是页面实际滚动的主体（即外层没被其他
overflow截断） - 如果用了 Grid 或 Flex 布局，注意不要给 sticky 元素的兄弟项加
height: 100%，它可能挤压包含块高度计算
sticky 元素没有设置 top / bottom / left / right
很多人写了 position: sticky 就以为完事了，但 CSS 规范明确要求：sticky 元素必须显式声明至少一个偏移属性（top、bottom、left 或 right），否则它等价于 position: static。
这个错误不会报错，控制台也无提示，只是完全不生效。
- 检查是否漏写，比如只写了
position: sticky却没跟top: 0 - 注意单位：
top: 0有效，top: 0px也有效，但top: auto无效 - 如果用了 CSS 自定义属性，确认变量已正确注入，例如
top: var(--sticky-top, 0)中--sticky-top不能未定义
父容器高度 ≤ sticky 元素自身高度
sticky 不是“永远吸顶”，它只在滚动过程中、且元素尚未完全滚出包含块时起作用。如果父容器高度刚好等于或小于 sticky 元素高度（比如一个 height: 80px 的 header 套在 height: 80px 的 wrapper 里），那它根本没有“滚动空间”，自然看不到粘性效果。
这种场景常见于调试时用少量占位内容测试，上线后内容变多才暴露问题。
- 用浏览器 DevTools 临时给父容器加
outline: 2px solid red，直观对比高度关系 - 确保父容器内有足够内容（或用
padding-bottom: 200vh模拟）来触发真实滚动 - 避免用
display: flex+flex-direction: column包裹 sticky 元素时，对父容器设height: 0或min-height: 0
overflow 和包含块高度这两个开关，比反复调 z-index 或加 !important 有效得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
