position: sticky 在 Flexbox 中失效的根本原因是父容器的 height: 100%、overflow: hidden 或 transform 等属性阻断了滚动检测机制，解决方法是改用 min-height: 100vh 并避免限制性样式。
position: sticky 为什么在 Flexbox 容器里失效
根本原因不是 position: sticky 本身有问题，而是父容器设置了 height: 100% 或 overflow: hidden、transform 等属性，直接阻断了 sticky 的滚动检测机制。常见于用 display: flex; flex-direction: column 布局整页时，给根容器（如 #root）加了 height: 100% —— 这会让浏览器认为“内容高度已封顶”，sticky 元素再怎么滚动也触不到临界点。
解决办法很简单：把 height: 100% 换成 min-height: 100vh，并确保导航栏的父级没有 overflow、transform、will-change 等限制行为的样式。
- ❌ 错误写法：
html, body, #root { height: 100%; } - ✅ 正确写法：
html, body { min-height: 100vh; }，#root { display: flex; flex-direction: column; } - 额外检查：
getComputedStyle(nav).overflow在控制台运行，确认返回值不是hidden或auto（某些旧版 Safari 对auto也敏感）
移动端下 sticky 导航栏被遮挡或错位
问题常出现在 iOS Safari 或部分安卓 WebView 中：导航栏吸顶后，顶部出现白边、内容被截断，或滚动时突然跳动。这多是因为 viewport 设置不完整，或未处理安全区（safe area）。
关键点是让视口“诚实”上报可用高度，并给导航栏留出物理空间：
- 必须在
中声明： - 导航栏 CSS 加上适配安全区的 padding：
padding-top: env(safe-area-inset-top); - 如果用了
fixed回退方案，注意top: env(safe-area-inset-top)而非top: 0 - 避免对
设置padding-top来模拟吸顶 —— 这会破坏 sticky 的滚动判断逻辑
滚动时动态切换导航栏样式（暗色 → 浅色）
纯 CSS 无法监听滚动位置做样式切换，必须配合 JS。但不用写复杂逻辑，只需最小化监听和 class 切换：
用 requestAnimationFrame 节流比 throttle 更轻量，且兼容性好；getBoundingClientRect().top 比 window.scrollY 更可靠（尤其在有 transform 的父容器中）。
- 监听时机：在
onMounted（Vue）或DOMContentLoaded后添加window.addEventListener('scroll', ...) - 判断逻辑：取导航栏元素的
el.getBoundingClientRect().top ，而非依赖固定像素阈值 - 触发更新：只在状态变化时才调用
el.classList.toggle('scrolled')，避免重复操作 DOM - CSS 过渡：用
transition: background-color 0.2s ease, box-shadow 0.2s ease，别加all—— 会拖慢性能
z-index 和背景色为什么必须显式设置
position: sticky 元素默认不创建新的层叠上下文（stacking context），一旦父容器有 z-index 或 opacity ，它就会被压在下面。更隐蔽的问题是：iOS Safari 在 sticky 激活瞬间，若没设 background-color，会短暂透出底层内容（尤其滚动加速时）。
- 必须为导航栏设置
z-index，且值要高于所有可能重叠的元素（建议 ≥ 100） -
background-color不能是transparent或rgba(..., 0)，哪怕你打算用 backdrop-filter 做毛玻璃效果，也要先给个 solid 色值兜底 - 如果用了
backdrop-filter: blur(10px)，记得加-webkit-backdrop-filter前缀，否则 Safari 不生效 - 避免用
box-shadow替代背景 —— 阴影不会遮挡下方内容，依然会透
最易被忽略的是父容器的 overflow 隐式继承和 viewport-fit 的缺失，这两点在真机调试前往往看不出问题。建议每次改完 sticky 样式，都用 Safari 的「Responsive Design Mode」开启「Device Frame」并手动拖动滚动条验证吸顶触发点是否准确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
