position: sticky 失效主因是父容器设置 overflow、transform 等阻断滚动上下文，或漏写 top 值；平滑过渡需在基础选择器设 transition: top，配合 padding-top 防遮挡；iOS 适配用 env(safe-area-inset-top) 和 backface-visibility: hidden。
position: sticky 是最轻量、最平滑的吸顶方案，但直接写 position: sticky 很可能没反应——不是你代码错了，是它对上下文太敏感。
为什么 position: sticky 不生效？
常见失效原因不是语法问题，而是父容器“拦路”：
- 父元素设置了
overflow: hidden、overflow: auto或overflow: scroll，直接切断粘性定位所需的滚动上下文 - 导航栏直系父容器有
transform、filter或will-change，创建了新层叠上下文，sticky 失去锚点 - 漏写了
top值（比如只写position: sticky，不加top: 0或top: 80px） - 父容器设了
height: 100%，在 Safari 中会误判为不可滚动，改用min-height: 100vh
怎样让吸顶过渡看起来“平滑”？
sticky 本身不触发重排，但视觉跳变常来自两处：内容被盖住、或吸顶瞬间无过渡。解决方式是纯 CSS 驱动：
- 给
transition: top 0.3s ease-out—— 注意不是加在临时类里，要写在基础选择器上，否则移除类时动画中断 - 用
top: 60px（而非0）控制吸顶触发时机：若导航栏初始有margin-top: 60px，就设top: 60px，否则滚动到临界点会突兀上跳 - 防内容遮挡：给紧接导航栏之后的元素加
padding-top: 60px（值 = 导航栏高度），别依赖pt-5这类抽象类，响应式下高度不准
移动端 iOS 的坑怎么绕？
iOS Safari 在地址栏收放、软键盘弹出时会重算视口，top: 0 可能短暂错位：
- 把
top改成top: env(safe-area-inset-top)，兼容刘海屏和动态视口变化 - 给导航栏加
backface-visibility: hidden，强制硬件加速，减少重绘抖动 - 避免在
top里混用单位，比如calc(60px + 1rem)，iOS 对某些组合解析不稳定 - 如果用了 Bootstrap 4/5，加
fixed-top后下拉菜单点不开，不是 z-index 低，是定位上下文丢失 —— 给.navbar-collapse加position: relative
真正难的不是写出那行 position: sticky，而是确认它生效的每一层父容器都没“偷偷”加 overflow 或 transform；过渡是否平滑，也不取决于 JS 节流多精细，而在于 transition 是否始终挂载在稳定 DOM 节点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
