position: sticky 失效主因是父容器设置 overflow 非 visible 或无明确滚动上下文，且受 flex 对齐、浏览器兼容性及祖先滚动容器范围限制。
直接用 position: sticky 就能实现，但浏览器兼容性和父容器限制会让它“突然失效”——不是代码写错了，而是没满足触发条件。
为什么 position: sticky 不生效？
最常见的情况是：父元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，或者父元素没有设置明确高度/边界（比如 height: auto 且内容未撑开），导致 sticky 失去“滚动容器”上下文。
- sticky 的生效前提是：元素必须在一个可滚动的“流式容器”内，且该容器不能裁剪其溢出内容（即不能有
overflow非visible） - 父级若为
flex容器且未设align-items: flex-start，可能因默认对齐方式导致 sticky 偏移计算异常 - IE 完全不支持，Edge 16+ 才开始支持；移动端 iOS Safari 9.0+ 支持，但旧版微信内置浏览器（X5 内核）可能降级为 static
导航栏吸顶的最小可行 HTML + CSS 结构
关键不是加多少样式，而是控制好“谁滚动、谁定位、谁包裹”：
<header class="nav-sticky"> <nav>首页 | 关于 | 产品 | 联系</nav> </header> <main> <p>页面正文...</p> </main>
对应 CSS 必须包含三要素：
立即学习“前端免费学习笔记（深入）”；
-
.nav-sticky { position: sticky; top: 0; z-index: 100; }——top是触发吸顶的临界偏移值 - 确保
<header>的父容器（通常是<body>）没有overflow: hidden或其他干扰滚动的行为 - 避免给
<header>设置float、clear或transform（会创建新的层叠上下文或格式化上下文，干扰 sticky 判断）
和 position: fixed 的核心区别在哪？
sticky 是“相对定位 + 条件固定”，fixed 是“脱离文档流 + 绝对视口定位”。这意味着：
- sticky 元素仍占据原始文档流位置，下方内容不会上移填补空白；fixed 会完全脱离流，下面内容立刻顶上来
- sticky 只在滚动到
top值时才“吸住”，滚回去就恢复原位；fixed 一旦启用就永远钉在视口某处 - sticky 受父容器限制（如父容器高仅 200px，即使页面滚动，它也只在该容器内“吸”）；fixed 不受任何父级约束
- 如果需要兼容 IE，只能退回到 JS 监听
scroll+ 切换fixed类名，但要注意fixed会引发回流和布局抖动
真正容易被忽略的是：sticky 的“吸顶区域”取决于它最近的、具有滚动能力的祖先容器。如果你把导航栏包进一个 div { height: 500px; overflow-y: auto; } 里，那它只会在那个 500px 区域内吸顶，而不是整个页面——这点比写错 top 值更难排查。
