吸顶元素必须有明确的滚动上下文父容器；position: sticky 仅在最近可滚动祖先内生效，若 body 被设 overflow: hidden 则直接退化为 relative，需用带 overflow-y: auto 的 wrapper 显式创建滚动上下文。
吸顶元素必须有明确的滚动上下文父容器
position: sticky 不是全局生效的定位，它只在“最近的可滚动祖先”范围内起作用。如果吸顶元素（比如 .nav-header）直接挂在 <body> 下，而 body 又被设了 overflow: hidden（常见于弹窗关闭后遗留样式），那 sticky 就彻底失效——浏览器找不到可滚动的上下文，直接降级为 position: relative。
实际项目中，最稳妥的做法是显式包裹一层滚动容器：
-
<div class="scroll-container">作为直接父级，设height: 100vh或max-height: 100vh+overflow-y: auto - 把吸顶元素（如
<header>）放在这层内，而非直接丢进<body> - 确保该容器没有
transform、filter、will-change——这些会创建新层叠上下文，切断 sticky 行为
header 标签本身不能作为 sticky 的“根容器”
<header> 是语义化标签，不是布局容器。很多人直接给 <header> 加 position: sticky，却忘了它上面可能还有兄弟元素（比如一个带 margin-top: 20px 的 banner），这会导致粘性触发点偏移甚至失效。
更关键的是：<header> 的默认 display 是 block，但如果它被塞进一个 display: flex 的父容器里，且没设 align-items: flex-start，它会被垂直居中，top 值的计算基准就乱了。
立即学习“前端免费学习笔记（深入）”；
建议做法：
- 用
<div class="sticky-wrapper">包一层<header>，样式写在 wrapper 上 - 避免让
<header>直接承担定位逻辑，它只负责语义和内容结构 - 如果必须用
<header>自身吸顶，检查它的所有祖先节点是否都满足 sticky 的三个前提条件
嵌套滚动区域下 sticky 失效时的结构补救
当吸顶需求出现在侧边栏、卡片内部或 modal-body 这类**局部滚动容器**里时，position: sticky 往往不工作——因为它的吸附范围只限于“最近可滚动祖先”，而这个祖先很可能就是那个局部容器本身，导致元素只在小区域内“粘”，而不是粘到视口顶部。
此时不能硬改 top 值，得重构结构：
- 把吸顶元素（如分类导航）从局部滚动区里提出来，放到外层固定布局位置（比如和 sidebar 并列的 flex item）
- 用
scroll-margin-top配合锚点跳转，避免 fixed 吸顶后遮挡标题 - 若必须保留在局部容器内，改用 JS 方案：监听该容器的
scrollTop，而非window.scrollY
移动端 iOS Safari 中的结构兼容陷阱
iOS Safari 对 position: sticky 的支持从 9.2 开始，但有个隐藏限制：如果吸顶元素的父容器设置了 min-height: 100vh 而不是 height: 100vh，在某些机型上会因滚动上下文判断不准而失粘。
还有个更隐蔽的问题：iOS 中 <body> 默认有 -webkit-overflow-scrolling: touch，一旦父容器加了 overflow: auto，又没配 -webkit-overflow-scrolling: touch，sticky 就可能卡住不动。
应对方式：
- 对局部滚动容器显式加
-webkit-overflow-scrolling: touch - 避免在吸顶元素上方使用
transform: translateY()等会触发合成层但破坏滚动流的样式 - 测试时务必在真机 Safari 上验证，模拟器和 Chrome DevTools 的表现常有偏差
body { overflow: hidden } ——它可能来自某个早已关闭的弹窗组件，却悄悄废掉了整个页面的 sticky 行为。 
