sticky元素失效的主因是未找到最近可滚动祖先，常见于祖先元素设overflow:hidden/auto/scroll、height:100vh截断滚动、父级含transform/filter创建新层叠上下文、或非直系子元素布局。
sticky元素没在滚动容器里生效，先查祖先的overflow值
sticky定位只认“最近的、可滚动的祖先”，而任何设置了overflow: hidden、overflow: auto、overflow: scroll或overflow-x: hidden的祖先都会把它锁死在那个局部上下文中——哪怕该容器本身根本没滚动条，sticky也会退化为static。
常见藏雷位置包括：.ant-modal-wrapper、.card根节点、Tab切换容器、Swiper壳、甚至CSS-in-JS注入的隐藏样式。它们常默认加overflow: hidden防圆角溢出或动画穿帮，却顺手把sticky封死了。
- 用DevTools选中sticky元素，逐级点开
parentElement直到body，挨个看Computed面板里的overflow值 - 临时给疑似“卡住”的那层加
overflow: visible !important，如果sticky立刻恢复，问题就定位准了 - 别只查直接父级；有时是爷爷级甚至
html上误加了overflow-x: hidden
滚动容器高度被height: 100vh截断导致sticky中途消失
你给.page或.wrapper写了height: 100vh，内容一长就被硬性截断，浏览器被迫把滚动交给body或html，而sticky只认“最近的、有滚动行为的祖先”。一旦它的直接父容器不滚动，position: sticky就彻底失效。
- 改成
min-height: 100vh，保留内容撑高空间 - 确保该父容器本身能产生滚动（比如子内容高度 > 容器高度）
- 不要对sticky元素的任意父级设
height: 100vh或max-height类固定高度
sticky父容器用了transform或filter就失效
transform、filter、will-change会在父级创建新的层叠上下文，导致sticky元素的“滚动锚点”被重置到这个新边界，而不是你预期的视口或外层容器。
- 把
transform、filter、will-change移到sticky元素自身上（而非其父容器） - 若父容器必须动效，改用
translateZ(0)替代transform: translateX()（部分场景兼容性更好） - 不要在sticky元素的父级上同时用
transform和overflow: visible——两者叠加，sticky几乎必挂
sticky元素不是滚动容器的直系子元素
sticky行为依赖“最近的滚动祖先”，但这个祖先必须是它**直接父级**或更近的可滚动容器。如果中间夹了一层display: flex或display: grid且未触发BFC，或者父级是inline-flex/inline-grid，sticky可能找不到有效锚点。
- 确保sticky元素是滚动容器的**直系子元素**（例如
#scroll-container > .sticky-header） - 避免把sticky塞进
float布局里——浮动会导致父容器高度塌陷，破坏包含块计算 - 若需兼容旧项目，可用
clear: both清除浮动；现代项目推荐改用display: flex替代浮动
height: 100vh看着合理，实则一刀切掉了整个滚动上下文；以及“父容器”这个词，在flex/grid布局里可能根本不是你视觉上以为的那个盒子。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
