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