position: sticky 导航栏失效最常见原因是父容器阻断，如 overflow:hidden/auto/scroll、transform 或 contain 等属性；必须设置 top 值（如 top:0），且确保未被覆盖；它保留在文档流中，需设 background-color 防内容透出。
用 position: sticky 实现导航栏“滚动吸附”效果，比 fixed 更自然、更少布局干扰，但必须满足父容器不阻断 sticky 行为的条件。
为什么 position: sticky 有时完全不生效
最常见原因是父容器“拦住了”粘性行为。sticky 不是全局视口定位，它只在**最近的可滚动祖先容器内**起作用。一旦父元素设置了以下任一属性，sticky 就会失效：
-
overflow: hidden、overflow: auto或overflow: scroll -
transform（哪怕只是transform: translateZ(0)） will-change: transform-
contain: paint或其他限制绘制边界的contain值
检查 DOM 结构时，重点看 <nav> 的直接父元素——比如常见的 <header> 或 <div class="site-header">，这些地方最容易误加上述样式。
top: 0 是必须写的，且不能被其他样式覆盖
sticky 必须配合 top（或 bottom/left/right）才能触发粘滞逻辑。只写 position: sticky 不起作用。
立即学习“前端免费学习笔记（深入）”；
- 写成
top: 0表示：当元素顶部滚动到视口顶部时开始吸附 - 如果导航有上边距或父容器有 padding，实际吸附位置可能偏下——此时应改用
top: 20px等具体值微调 - 确保没有其他 CSS 规则（如来自重置库或框架）把
top覆盖成auto或initial
简单验证方式：在开发者工具中临时删掉所有影响 top 的规则，只保留 position: sticky; top: 0;，看是否恢复吸附。
内容区域不用手动留白，但要防“透出”
这是 sticky 相比 fixed 最大的优势：position: sticky 元素仍保留在文档流中，所以后续内容不会上移，也无需给 .content 加 margin-top。
- 但要注意：sticky 导航栏本身没背景色时，滚动中内容会从下方“透出来”
- 必须显式设置
background-color和box-shadow（例如box-shadow: 0 2px 6px rgba(0,0,0,0.1)），否则视觉体验断裂 - 如果导航高度响应式变化（如移动端折叠菜单展开后变高），sticky 仍能正确吸附，无需 JS 计算——这点比 fixed 更鲁棒
浏览器兼容性和降级策略
现代项目基本可放心用：position: sticky 在 Chrome 56+、Firefox 59+、Safari 6.1+、Edge 16+ 均原生支持。iOS Safari 从 iOS 14.5 起稳定支持。
- 若需兼容老版本 iOS（如 iOS 13.x 及更早），可加一段轻量 JS 降级：监听
scroll，当window.scrollY >= 80时给<nav>切换fixedclass - 不要用
@supports (position: sticky)包裹整个导航样式——它只控制是否启用 sticky，不影响其他基础样式（如颜色、字体），基础样式应始终生效 - 避免在同一个元素上同时声明
position: sticky和position: fixed；CSS 会以最后声明的为准，容易造成意外交互
真正容易被忽略的是父容器的 transform 和 overflow 组合——它们无声无息地禁用 sticky，且错误不报任何提示，只能靠结构排查。
