sticky-top 失效的根本原因是粘性上下文被中断：祖先元素设置 overflow:hidden/auto/scroll（且不提供垂直滚动）、Flex/Grid 容器未设高度+overflow、iOS Safari 缺少 -webkit-sticky 或 top 用百分比、表格中对 tr/th 使用不当。
sticky-top 失效是因为祖先容器切断了粘性上下文
不是 class 没加对，而是 sticky-top 依赖的“粘性上下文”被某个祖先元素静默终止了。只要从 sticky-top 元素向上查到最近的滚动容器之间，存在任意一个设置了 overflow: hidden、overflow: auto 或 overflow: scroll 的祖先（且该祖先本身**不提供垂直滚动**），粘性行为就会彻底失效。
常见陷阱包括：.container 外层套了 overflow: hidden 的布局 wrapper；.row 父级用了 transform: translateZ(0)；或者全局 html, body { overflow: hidden }（比如全屏弹层场景）。
- 检查路径：用 Chrome DevTools 逐层往上 hover 祖先节点，看哪个节点右侧有「Overflow」标记但没滚动条
- 临时诊断：给
sticky-top元素加border: 2px solid red，滚动时若边框随文档流移动而非固定，说明上下文已断 - 修复优先级：删掉问题祖先的
overflow> 改为overflow: visible> 若必须保留，把 sticky 元素**提级到该祖先之外**
Flex/Grid 容器里 sticky-top 不触发滚动条件
sticky-top 必须在“可滚动容器”内才能激活，而默认的 display: flex 或 display: grid 容器**不会自动创建滚动上下文**——即使内容溢出，也不会产生滚动轴，position: sticky 就永远等不到触发时机。
例如：<div class="d-flex flex-column">
<header class="sticky-top">...</header><main>...</main>
</div> 中，.d-flex 没设 overflow-y: auto，也无显式高度限制，sticky-top 就静默退化为 position: relative。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置：父容器要有
height或max-height+overflow-y: auto - 注意 Flex 主轴方向：
flex-column需overflow-y，flex-row需overflow-x - 避免用
min-height: 100vh代替固定高度——它不保证容器可滚动，尤其在内容少时
iOS Safari 下 sticky-top 需要双重声明和绝对单位
iOS Safari（特别是 15.4 之前版本）对 position: sticky 的实现更严格：sticky-top 类默认只写了 position: sticky，但 Safari 要求同时声明 position: -webkit-sticky，且 top 值不能是百分比或 rem（部分版本会忽略）。
典型失效现象：桌面端正常，iOS 上滚动时导航栏一闪而过或完全不动。
- 补全声明：
.sticky-top { position: -webkit-sticky; position: sticky; top: 0; } -
top值用px（如top: 0、top: 48px），避开top: 1rem或top: 5% - 禁用可能干扰的属性：确保
sticky-top元素及其直接父级没有transform、will-change
表格内部使用 sticky-top 时作用对象错位
在 Bootstrap 的 .table-responsive 或原生 <table> 中直接给 <code><tr> 或 <code><thead> 加 <code>sticky-top，大概率无效。因为表格相关元素（table、tbody、tr）的 display 值（如 table-row）在部分浏览器（尤其是 Firefox 和旧 Safari）中不支持 position: sticky。
真正生效的是 <th> 或 <code><td> 这类单元格级元素，且需配合 <code>top: 0 和父 <thead> 的显式定位约束。
<ul><li>正确做法：给 <code><th> 加 <code>position: sticky; top: 0;，并确保其父 <thead> 有 <code>position: relative
.table > thead > tr > th { position: sticky; top: 0; } 替代直接加 sticky-top 类<tr> 上设 <code>sticky-top——它会被浏览器忽略，控制台也不报错
真正卡住人的，从来不是类名拼错，而是没意识到 sticky-top 是个“条件触发器”：它需要可滚动的祖先、干净的层叠上下文、兼容的 display 类型，以及 iOS 下那行容易被漏掉的 -webkit-sticky。任何一个环节断开，它就安静地退回到 relative 行为，连 warning 都不抛。
