position: sticky 在移动端失效主因是父容器设了 overflow: hidden 或未形成 BFC，且 iOS Safari 15.4 前需加 -webkit-sticky；间隙源于亚像素舍入误差，应统一用整数单位并避免 JS 动态计算 top 值。
直接用 position: sticky 就能实现，但移动端不生效、有间隙、滚动卡顿，90% 是因为父容器或样式写法踩了坑，不是属性本身的问题。
为什么 position: sticky 在移动端没反应？
最常见原因是：父元素设置了 overflow: hidden 或没形成 BFC，导致 sticky 元素被“截断”。iOS Safari（尤其是 15.4 之前）还必须加 -webkit-sticky 才认。
- 检查页眉的**直接父容器**是否设置了
overflow: hidden—— 这会彻底禁用 sticky 行为 - 确保父容器有明确高度或内容撑开，不能是
height: 0或display: contents - 必须显式设置
top值（如top: 0），只写position: sticky不生效 - 移动端 CSS 必须同时写两行：
position: -webkit-sticky;和position: sticky;
为什么页眉粘住后和内容之间有 1px 间隙？
这在 iOS Safari 和部分 Android WebView 中高频出现，本质是渲染层对 top 计算的亚像素舍入误差，尤其当页眉有 border、padding 或字体抗锯齿影响高度时。
- 避免用 JS 动态计算
top值（比如$('#element_a').height()），JS 返回值带小数，CSS 渲染不一致 - 统一用整数单位控制高度：
height: 56px、border-bottom: 1px solid #eee，别混用em或rem - 给页眉加
transform: translateZ(0)或will-change: transform可强制启用 GPU 层，缓解间隙 - 如果间隙出现在两个 sticky 元素之间（如双导航栏），不要让它们同级并列；把第二个包进一个普通
<div>再设 sticky
如何让 sticky 页眉不遮挡内容或错位？
top 不是“离视口顶部多少像素就固定”，而是“滚动到距离其**原始文档流位置顶部还有多少像素时开始粘住**”。所以前面有 margin/padding，就会偏移。
立即学习“前端免费学习笔记（深入）”；
- 把
padding-top从页眉父容器移到页眉自身上（即写在.header上），而不是靠外层留空 - 如果页眉前有 banner 或轮播图，且不想它参与滚动，用
position: relative+z-index控制层级，别用fixed混用 - 页眉内若含 dropdown 或 popover，避免对其父容器设
transform—— 某些 Chrome 版本下会破坏 sticky 的定位上下文 - 横向滚动时页眉错位？说明它被 flex 容器拉伸了。加
flex-shrink: 0或width: 100%锁定宽度
真正难的不是写那三行 CSS，而是排查哪一层父容器悄悄加了 overflow: hidden，或者哪个祖辈元素用了 display: flex 却没意识到它会影响 sticky 的祖先查找逻辑 —— 这些细节浏览器不会报错，只会静默失效。
