sticky top-0 在 ios safari 失效主因是滚动上下文被破坏：父容器 overflow-hidden、transform 或视口高度未动态适配；需同时满足父容器 overflow-y-visible、sticky 元素 top-0+z-50+min-h-[var(--vh,100vh)] 且 js 动态更新 --vh。
sticky top-0 在移动端 Safari 失效的常见原因
不是 Tailwind 写错了，而是 position: sticky 在 iOS Safari 中对布局上下文极其敏感。最常踩的坑是：父容器设了 overflow-x-hidden 或 overflow-y-hidden，直接让 sticky 退化为 relative；或者父级用了 transform、will-change，打断了滚动上下文链路。
另一个高发问题是视口高度动态变化——iOS 地址栏收起/展开时，100vh 不更新，但 sticky 的计算锚点已偏移，导致“吸顶位置突然跳高”或“滚动卡顿”。这不是 bug，是 Safari 对初始布局快照的依赖所致。
必须加的三样东西才能稳定生效
仅写 sticky top-0 远不够。要真正稳住，得同时满足：
- 导航容器自身带
top-0（或bottom-0）+z-50（避免被后续内容遮盖） - 其**直接父容器**不能有
overflow-hidden，且最好显式设overflow-y-visible（Tailwind 中用overflow-y-visible） - 用 CSS 变量兜底视口高度：
min-h-[var(--vh,100vh)]，再配合 JS 动态设置--vh为window.innerHeight * 0.01
示例结构：
<div class="overflow-y-visible"> <header class="sticky top-0 z-50 bg-white min-h-[var(--vh,100vh)]"><nav></nav></header> </div>
滚动时阴影与背景切换总闪烁？别硬切 class
把 shadow-sm 和 bg-white 直接写死在 HTML 里，再靠 JS 切换，会导致亚像素渲染下 window.scrollY === 0 判断失准，尤其在高 DPI 屏幕上，用户快速滚动会看到明显闪烁。
更稳的做法是预设基础态，只增不删：
- 初始就写
bg-transparent backdrop-blur-sm - JS 监听用
requestAnimationFrame节流，判断条件为window.scrollY > 10（不是=== 0） - 只添加
bg-white shadow-sm，不主动移除——滚动回顶部时由浏览器自然过渡
flex 布局 + 图标文字混合时吸顶错位
在 sticky 容器内用 flex-col justify-between 是高危操作。iOS Safari 会对子元素高度做异步重排，导致 sticky 锚点计算错误，表现为“导航栏吸顶后悬浮在半空”或“底部留白”。
解决方式很直接：
- 改用
flex-row或显式固定高度，比如h-16（对应 4rem） - 避免在
sticky元素内部嵌套多层 flex +min-h-0/h-full组合 - 如果必须垂直居中，用
flex items-center justify-center替代justify-between
最易被忽略的是：sticky 的稳定性不取决于你写了多少类，而取决于滚动链路是否干净——中间任何一层 overflow-hidden、transform 或未约束的高度，都会让它静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
