position: sticky 在导航栏上“没反应”最常见的原因是父容器设置了 overflow: hidden/auto/scroll 中断定位上下文，且未显式设置 top 值；fixed 导航栏需用 padding-top 补偿占位，避免内容遮挡。
为什么 position: sticky 在导航栏上经常“没反应”
最常见的原因是父容器设置了 overflow: hidden、overflow: auto 或 overflow: scroll，这会中断 sticky 的定位上下文。另外，sticky 必须配合 top（或 bottom）值才生效，只写 position: sticky 是无效的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保导航栏的直接父元素没有限制 overflow（可临时加
overflow: visible验证） - 必须显式设置
top: 0（或其它数值），否则不触发粘性行为 - 如果导航栏在
sticky直接加在导航栏自身（如或 - 注意浏览器兼容性：
sticky在 iOS Safari 14.5+ 和 Android Chrome 56+ 支持良好，但旧版 UC 或 QQ 浏览器可能回退失效
position: fixed 导航栏导致页面内容“上移遮挡”的解决方法
fixed 会让元素脱离文档流，导航栏不再占位，后续内容会顶到顶部，被遮住。这不是 bug，是预期行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
或紧接导航栏之后的主内容容器加padding-top，值等于导航栏高度（例如padding-top: 60px） - 避免用
margin-top：它不能防止滚动时内容从导航栏下方穿出 - 如果导航栏高度响应式变化（比如移动端折叠），用 CSS 变量 +
calc()更稳妥：padding-top: calc(var(--navbar-height, 60px)) - 若使用 JS 动态控制导航栏显隐，记得同步更新 body 的 padding，否则会出现跳动
两种方案的性能与交互差异
实操建议： 立即学习“前端免费学习笔记（深入）”； iOS Safari 对 实操建议： 立即学习“前端免费学习笔记（深入）”；sticky 由浏览器原生优化，滚动时重绘开销小，且能自然响应父容器滚动（比如在某个 fixed 始终相对于视口，不受父级滚动影响，但可能触发频繁的合成层提升，低端设备偶有闪烁。
sticky，尤其当导航栏位于页面常规流中（如文章页顶部）fixed
fixed 导航栏上滥用 transform: translateZ(0) 强制硬件加速——现代浏览器已自动优化，反而可能引发 iOS Safari 的输入框失焦问题fixed 下需额外处理 z-index 层级，而 sticky 通常继承父级 stacking context，更可控移动端 touch 滚动下
sticky 卡顿或延迟的修复sticky 的滚动监听有微小延迟，快速滑动时可能出现“先滚走再吸顶”的现象，本质是浏览器未及时触发重排。
实际项目里，最常被忽略的是 will-change: transform（仅在必要时，避免滥用）-webkit-overflow-scrolling: touch（已废弃，且与 sticky 冲突）sticky 的父容器 overflow 状态和 fixed 后的内容占位补偿——这两处出错，80% 的“固定导航不工作”就已注定。
