移动端 sticky 失效主因是祖先元素 overflow:hidden/auto/scroll、inline-flex/grid 或 height:100vh 静默禁用滚动上下文，致 sticky 退化为 static；需逐级检查 computed overflow 与 display，用 clip-path:inset(0) 替代 overflow:hidden 或提升 sticky 元素层级。

移动端 sticky 失灵，不是“部分机型”问题，而是 iOS Safari（尤其 15.4 之前）和某些 Android WebView 对 position: sticky 的实现有硬性限制——它不看设备型号，只看 DOM 结构和 CSS 环境是否满足粘性定位的触发条件。只要不满足，哪怕写对了 top: 0，Computed 中的 position 也会直接变成 static，毫无提示。

为什么 DevTools 里写了 sticky 却显示 static

浏览器在样式计算阶段就决定是否启用 sticky 行为，不是渲染失败，而是“压根没进 sticky 流程”。常见原因包括：

• 任意祖先元素（哪怕隔了 4 层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该祖先未形成实际滚动（比如内容没溢出、高度固定）
• 父容器是 display: inline-flex 或 display: inline-grid —— 它们不创建 BFC，sticky 被规范直接忽略
• 某个祖先用了 transform（如 translateZ(0)）、filter 或 will-change，创建了新层叠上下文，导致 sticky 参考系错位
• body 或最外层容器设了 height: 100vh：iOS 上 min-height 计算异常，滚动上下文无法建立

iOS Safari 中 flex/grid 容器里 sticky 不动

flex 或 grid 容器本身不自动产生滚动上下文，Safari 对“可滚动区域”的判定更苛刻。缺一不可：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给 flex 父容器加 flex-direction: column + overflow-y: auto（不是 overflow: auto）
• 显式设 max-height（如 max-height: 500px），不能只靠 min-height: 100vh
• 加 align-items: flex-start —— align-items: stretch 或 baseline 会干扰“进入视口”的判定
• 绝对别用 display: inline-flex 或 inline-grid，它们会让 sticky 直接失效

表格表头 <thead> 加 <code>sticky-top 完全没反应

<thead> 默认是 <code>display: table-header-group，CSS 规范明确不支持 sticky。浏览器看到就跳过，不会报错，Computed 中 position 一定是 static。

• 必须把 position: sticky 落到每个 <th> 或 <code><td> 上，并配 <code>top: 0 和 z-index: 1070
• <th> 必须有 <code>background-color，否则滚动时文字透出
• 外层容器（如 <div class="table-wrapper">）要设 <code>max-height: 400px + overflow-y: auto，仅靠 table-responsive 不够
• 避免 <table> 上设 <code>border-collapse: separate，Safari/Chrome 中表头会“粘住但往下掉像素”

  为什么滚动到底部 sticky 突然消失

  这不是 bug，是边界行为：position: sticky 只在“滚动范围内”生效。当 sticky 元素随父容器滚出可滚动区域末端时，它自动解除固定，回归文档流。

  • iOS 上尤其明显：若父容器内容太短、或高度计算异常（如 100vh 遇到地址栏缩放），sticky 区域可能被压缩甚至归零
  • 不要依赖 top: 0 就能全程吸顶；它的有效范围由父容器的 height/max-height 和内容总高度共同决定
  • 若必须全程固定（如导航栏），别硬套 sticky —— 改用 position: fixed + 手动占位更可控

  真正容易被忽略的点：sticky 不是“写上就生效”的属性，而是一套依赖完整滚动上下文链的机制。任何一个环节断开（overflow、transform、display 类型、高度缺失），它就静默退出。排查时别只盯目标元素，要从它开始往上翻父节点的 Computed 样式，逐层确认 overflow 和 display 值。