position: sticky 失效主因是父容器缺乏可滚动上下文，常见于overflow:hidden/auto/scroll、height:100vh、transform等属性截断粘性行为，且必须设置top/bottom等阈值。
position: sticky 能直接实现吸顶，但加了它却没反应，大概率不是浏览器不支持，而是被父容器或自身样式悄悄禁用了。
为什么加了 position: sticky 却纹丝不动
根本原因不是写错了，而是 sticky 没找到“可粘的边界”——它必须依附于一个**有滚动能力的祖先容器**，而这个容器往往被样式无意锁死：
-
overflow: hidden、overflow: auto、overflow: scroll都会让父容器失去滚动上下文，sticky 直接退化为position: relative - 父容器或 sticky 元素自己用了
transform、filter、will-change，会创建新层叠上下文，中断 sticky 行为 - 没写
top（或bottom/left/right）——只写position: sticky是无效的，必须指定阈值 - 导航栏的直接父元素（比如
<header>）设置了margin或padding，干扰了 offset 计算位置
top 值到底是相对谁计算的
top: 0 不是“贴视口顶部”，而是“贴最近的可滚动祖先容器的顶部”。这个容器常被误认为是 body，其实可能是某个 div：
- 如果导航栏包在一个
<div class="main">里，而该div设了height: 500px; overflow-y: auto;，那top: 0就是相对于这个div的顶部，不是整个页面 - 想让它真正贴视口顶部？把导航栏提一级，直接挂到
<body>下，或确保它的父容器是overflow: visible（默认值）且无高度限制 - iOS 安全区域需要留白？用
top: env(safe-area-inset-top)，但得配合@supports检测
吸顶后内容被遮住怎么办
这不是 bug，是 sticky 的设计行为：它视觉上“浮起”，但仍在文档流中占位，下方内容不会自动下移。你必须手动预留空间：
立即学习“前端免费学习笔记（深入）”；
- 给导航栏的**下一个兄弟元素**（通常是
<main>或<article>）加margin-top或padding-top，值等于导航栏高度（如60px） - 避免用 JS 动态读取高度——CSS 里用
calc(60px + 1rem)或响应式单位更稳 - 如果导航栏高度不固定（比如小屏缩为
48px），用媒体查询同步调整占位值，或改用padding-top+box-sizing: border-box - 别给 sticky 元素本身设
margin-bottom来“撑开”下面——它不影响粘性触发点，还可能让首屏留白异常
IE 和旧版 Safari 怎么低成本兜底
IE11 完全不支持 position: sticky，iOS Safari 15.2–15.3 有严重闪退 bug，不能靠 JS 全量重写逻辑：
- 用
@supports (position: sticky)包裹 sticky 样式，不支持时降级为position: relative - JS 只做最小干预：监听一次
scroll，判断scrollTop >= offsetTop，然后切换一个.nav-fixed类 - 对应 CSS 写
.nav-fixed { position: fixed; top: 0; left: 0; right: 0; }，并加will-change: transform防 iOS 渲染闪烁 - 微信内嵌页可试
position: -webkit-sticky，它是 iOS 15.2–15.3 的关键补丁
真正容易被忽略的是：sticky 的生效范围完全取决于“最近滚动祖先”的存在与状态，而不是你写了多少行 CSS。检查 DOM 结构层级和每一层的 overflow、transform、height，比反复调 top 值更关键。
