position: sticky 失效主因是父容器 overflow 非 visible 或未设合法 top 值；它依赖滚动祖先计算粘性区域，非脱离文档流，而 fixed 始终相对视口定位。
为什么 position: sticky 在导航栏上没生效？
最常见的原因是父容器设置了 overflow: hidden、overflow: auto 或 overflow: scroll，这会切断 sticky 的定位上下文。sticky 不是脱离文档流的“固定”，而是依赖最近的、有滚动能力的祖先容器来计算“粘性区域”。一旦父级截断了滚动，sticky 就失去参照，退化为 position: relative。
另一个高频问题是没设 top 值（哪怕设成 top: 0），或者设了但父元素没有明确高度或未触发 BFC（比如浮动未清除），导致粘性临界点无法被正确识别。
- 检查导航栏直接父元素是否含
overflow非visible的声明 - 确认导航栏自身有
top（如top: 0）且单位合法（不能是top: auto） - 避免父容器用
transform、perspective或filter—— 这些会创建新的层叠上下文并禁用 sticky
position: sticky 和 position: fixed 的关键区别在哪？
sticky 是“条件固定”：它在滚动到阈值前是 normal 流内位置，到达 top 值对应位置后才吸附；fixed 则从渲染起就脱离文档流、相对于视口定位，会留下空白空隙，且不随父容器滚动范围变化而调整行为。
这意味着：
– sticky 导航栏不会遮挡下方内容（除非你额外加 z-index 和背景）
– 它天然响应父容器滚动（比如在一个 height: 400px; overflow-y: auto 的卡片里也能粘住）
– fixed 则只认整个 viewport，要实现局部滚动粘性得靠 JS 模拟
立即学习“前端免费学习笔记（深入）”；
- 需要“只在某个区域里粘”的场景（如侧边目录、表格表头），sticky 更轻量、无 JS 依赖
- 需要始终钉在视口顶部、无视任何父级滚动（如全站顶部导航），fixed 更可靠
- sticky 在 Safari 旧版本（macOS 11.2）有兼容问题，fixed 兼容性更广
怎么让 sticky 导航栏不遮挡下面的内容？
sticky 元素本身不会自动撑开下方空间，所以当它吸顶后，原来的位置变空，下面内容会上移——这不是 bug，是预期行为。解决方法不是给导航加 margin-bottom，而是给它的**下一个兄弟元素**设置等高的 margin-top 或 padding-top，数值等于导航栏高度。
更健壮的做法是用 CSS 自定义属性统一控制：
:root {
--nav-height: 60px;
}
.navbar {
position: sticky;
top: 0;
height: var(--nav-height);
z-index: 100;
}
.main-content {
padding-top: var(--nav-height);
}
注意：如果导航栏高度是动态的（比如多行文字、响应式字号），纯 CSS 难以精确匹配，此时需 JS 读取 offsetHeight 并写入内联样式或自定义属性。
移动端 Safari 上 sticky 不工作怎么办？
iOS 13.4+ 已支持 sticky，但仍有两个典型陷阱：
– 页面根元素（ 或 ）设置了 height: 100% 或 min-height: 100vh，会干扰 sticky 的滚动容器判定
– 导航栏内部用了 display: flex + flex-wrap: wrap，某些 Safari 版本下触发渲染异常
- 移除
和上所有显式的height、min-height（用100vh要谨慎） - 给 sticky 元素加
will-change: transform（仅限必要时，避免滥用） - 测试时关闭「减少动画」系统设置，部分 iOS 版本在此模式下会降级 sticky 行为
如果以上都无效，说明当前 Safari 版本确实不支持，fallback 方案只能是监听 scroll 事件 + 切换 position: fixed 类名，同时手动修正 body 的 padding-top。
