position:sticky在移动端失效主因是父容器设置overflow:hidden/auto/scroll而切断锚定链；媒体查询中改position类型会导致布局跳动；z-index受层叠上下文限制；兼容性差时应优先用IntersectionObserver模拟。
position:sticky 在移动端不生效？检查父容器是否溢出隐藏
很多情况下 position:sticky 看似写了却完全没反应，尤其在 iOS Safari 或安卓 WebView 中——根本原因常是父级元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll。Sticky 的“粘性”依赖于最近的滚动祖先（scrolling ancestor），而这些 overflow 值会创建新的块格式化上下文（BFC），同时**切断 sticky 的锚定链**，导致它退化为 position:relative。
- 检查所有上层容器，特别是
.header-wrapper、.content、main这类常见包裹层 - 临时加
outline: 1px solid red逐层排查，比靠猜快得多 - 若必须限制溢出（比如轮播图容器），改用
overflow: clip（现代浏览器支持较好）或用mask替代 - iOS 15.4+ 才真正修复了
sticky在overflow:auto内部的多数问题，低版本只能绕开
媒体查询里写 sticky 无效？别在断点中重设 position
有人想“小屏取消吸顶”，于是这样写：
header { position: sticky; top: 0; }
@media (max-width: 768px) {
header { position: static; }
}
这看起来合理，但实际会导致布局跳动甚至内容错位——因为 position:static 会让元素回归文档流，高度计算逻辑突变。更稳的做法是保持 sticky，只控制它的“粘性范围”：
- 用
top值动态归零：@media (max-width: 768px) { header { top: -9999px; } }（视觉上脱离粘性区，但不破坏布局流） - 或者加 class 控制：
<header class="js-sticky-enabled"></header>，媒体查询不动 CSS，JS 根据宽度 toggle class - 避免在媒体查询中切换
position类型，CSS 动画和重排都不可控
sticky 吸顶后遮挡内容？z-index 不是万能解药
z-index 确实能解决层级覆盖，但很多人忽略了 stacking context 的生成条件。如果页头父容器有 opacity: 0.99、transform: translateZ(0) 或 will-change: transform，它就会创建独立层叠上下文，此时给 header 设再高的 z-index 也只在该上下文内有效。
立即学习“前端免费学习笔记（深入）”；
- 先确认页头是否被某个“看不见的父容器”框住了 stacking context —— 浏览器开发者工具的 Layers 面板可直观看到
- 优先移除不必要的
opacity、filter、transform，比硬加z-index更可靠 - 真要保特效，就在页头自身触发新 stacking context：
header { position: sticky; top: 0; z-index: 1000; isolation: isolate; }
兼容性兜底：当 sticky 不可用时，用 IntersectionObserver 模拟
IE 完全不支持 sticky，旧版 Android Browser 和部分微信内置浏览器也靠不住。纯 CSS fallback（如 JS 切换 fixed）容易引发滚动抖动和定位偏移。现代做法是用 IntersectionObserver 监听页头与视口关系：
const observer = new IntersectionObserver(
([entry]) => {
header.classList.toggle('is-pinned', !entry.isIntersecting);
},
{ threshold: [0, 1] }
);
observer.observe(header);
配合 CSS：
.is-pinned { position: fixed; top: 0; width: 100%; }
- 这个方案不依赖滚动事件，性能好，且天然支持平滑过渡（加
transition: top 0.2s即可） - 注意
fixed会把元素从文档流拿走，需给后续内容预留占位（比如padding-top或伪元素撑高） - 如果页面有横向滚动，
fixed元素可能错位，此时得监听scrollLeft并手动修正left
真正难的不是让页头“看起来吸顶”，而是让它在各种滚动场景（快速滑动、回弹、iframe 嵌入、第三方 SDK 注入样式）下都不掉链子。细节都在父容器、层叠上下文和滚动锚点里，不是加个 sticky 就完事的。
