position: sticky 失效了？先检查父级 overflow 与高度约束这三处

写了 position: sticky 和 top: 0，预览里导航却还是跟着内容一起滚走——这种现场在主题改版、区块布局和自定义吸顶栏里特别常见。多数时候不是浏览器“不支持 sticky”，而是定位上下文被悄悄改掉了：祖先的 overflow、真正在滚动的那个容器，以及元素自身的 top/高度约束，任意一处对不上，粘性效果就会像没写一样。

下面按排查顺序走三处检查。目标很明确：尽快定位失效点，把吸顶恢复成你预期的样子，而不是把 CSS 属性再背一遍。

先确认：sticky 到底“粘”在谁身上

sticky 可以理解为：在跨越阈值之前像 relative，越过阈值后在最近的滚动容器（scrollport）里表现出类似 fixed 的粘附。它不会无条件钉死在浏览器视口上，而是受祖先滚动区域和包含块共同约束。

所以一旦失效，优先问两个问题：页面实际在滚的是谁？sticky 元素的祖先链有没有把 overflow 从默认的 visible 改掉？把这两点想清楚，后面的检查不会绕路。

第一处：祖先 overflow 是不是已经不是 visible

这是最高频的坑。任意祖先（不限于直接父级）只要设置了 overflow: hidden、auto、scroll，或在某一轴上写了 overflow-x / overflow-y 的对应值，都可能让 sticky 失效，或把粘附范围锁进错误的滚动盒里。

主题和页面构建器里很常见的来源包括：外层为了圆角裁切写了 overflow: hidden，侧栏或卡片容器用了 overflow: auto，以及某些全宽包装层为了清浮动顺手加了 overflow。你在 sticky 元素上怎么调 top 都没用，因为粘性定位的参照滚动区域已经被上游改写了。

可执行检查：

1. 在开发者工具里选中 sticky 元素，沿 DOM 一路向上看计算样式里的 overflow（含 x/y 分轴）。
2. 任何不是 visible 的祖先都先记下来；临时改回 visible 做对比，看 sticky 是否立刻恢复。
3. 若该祖先必须裁切或内部滚动，不要指望“再加强 sticky 写法”能硬扛——应把裁切职责下移到更内层、与 sticky 无关的节点，或把 sticky 元素挪到不受该 overflow 影响的层级。

改法判断很直接：需要全局吸顶（相对页面/视口滚动）时，祖先链应尽量保持 overflow 为 visible；若业务上必须在某个面板内部滚动并在面板内吸顶，那就要接受 sticky 的参照是这个面板，而不是整页。

第二处：滚动容器和 sticky 的定位上下文是否匹配

overflow 查完仍不吸，多半是“你以为在滚 window，其实在滚某个内部容器”。sticky 会粘在最近的 scrollport 上。一旦父级（或更上层）成了实际滚动盒，而这个盒子的高度又和 sticky 元素差不多高，元素没有相对父级继续位移的空间，也就表现不出“吸住再贴住”的那段过程。

典型结构是：外层固定视口高度并 overflow: auto，内层内容很高，sticky 写在内层某个标题或工具条上。此时你滚动的是外层盒子；若 sticky 的包含祖先高度被撑满且没有多余滚动余地，效果会直接哑火。反过来，若你期望的是整页吸顶，却把 sticky 放进了独立滚动的主内容列，也会出现“页面在滚、导航不粘”的错位。

可执行检查：

1. 看滚动条出现在哪里：浏览器窗口，还是某个 overflow: auto/scroll 的面板。
2. 确认 sticky 元素是否位于该滚动容器的子树内，且该容器确实是你希望它参照的那一个。
3. 对比：滚动“错误的那一层”时 sticky 是否反而生效——若会，说明定位上下文没坏，只是绑错了滚动源。

改法判断：全局导航应避免包在局部滚动布局里；局部吸顶（如表格头、分组标题）则应保证滚动发生在直接相关的容器上，并给该容器足够的内容溢出，而不是让 sticky 和它的滚动父级同高“卡死”。

第三处：元素自身的 top（阈值）和高度约束是否成立

前两处都干净时，再看 sticky 自己。常见遗漏是写了 position: sticky 却忘了给阈值：top、right、bottom、left 至少要有一个明确偏移，否则没有“开始粘附”的触发线。吸顶导航一般是 top: 0；若上面还有固定公告条，就要写成公告条高度对应的偏移，而不是想当然仍是 0。

另一类是高度与父级约束：sticky 只能在其包含块（通常是父级）的范围内活动。父级高度几乎等于 sticky 自身高度、父级在文档里没有可滚动的“行程”，或者 sticky 子项高度反超父级可容纳范围时，视觉上也会像失效。父级如果高度被写死、又没有内容把滚动距离拉开，粘性阶段同样出不来。

可执行检查：

1. 确认存在有效的 top（或其它方向阈值），且数值符合你想贴住的那条边。
2. 在布局面板里对比 sticky 元素高度与父级高度：父级是否明显更高、是否还有兄弟内容在“推”这段滚动距离。
3. 临时给父级增加一段占位内容或去掉不合理的固定高度，验证是否只是“行程不够”。

改法判断：阈值缺失就补阈值；父级太矮就让父级包裹完整的滚动章节（导航 + 需要陪伴滚动的内容区），而不是把 sticky 单独塞进一个高度被锁死的空壳；需要始终贴视口且不受父级行程限制时，才考虑改用 fixed，并接受它脱离原有文档流约束——两者不是同一套模型，不要混着试。

建议的现场排查顺序（可直接照做）

打开要吸顶的页面，选中目标元素，按这个短流程跑一遍通常比反复改 CSS 更快：

1. 看自身：是否 position: sticky，是否写了 top（或其它阈值），层级和背景是否会被下面内容盖住（这是观感问题，但常被误判成“没吸住”）。
2. 看祖先 overflow：从父级到更上层，找出第一个非 visible 的 overflow；临时清除做 A/B。
3. 看谁在滚：滚动条在 window 还是内部容器；内部容器高度是否与 sticky “同高无行程”。
4. 看父级高度与内容结构：父级是否只包了 sticky 自己；把完整内容段包进来后再判断。
5. 再决定改法：能去掉的裁切/滚动就去掉或下移；必须局部滚动就接受局部 sticky；阈值和结构修正后仍要强行视口固定，再评估 fixed，而不是继续堆无效的 sticky。

WordPress 主题或插件输出的页头、侧栏、弹层包装里，overflow 和内部滚动容器往往来自通用布局类，而不是你手写的那一行 sticky。改样式前先分清“这是我的规则还是布局框架的规则”，可以少和 !important 打架。

收束：失效时先定界，再改代码

sticky 不生效，按优先级收敛到三件事就够用：祖先 overflow 是否非 visible、滚动容器是否与期望的定位上下文一致、自身 top 与父级高度行程是否成立。先用开发者工具把这三处钉死，再决定是挪 DOM、下移裁切，还是调整阈值和父级包裹范围。

下次再碰到“明明写了 sticky”，不要先怀疑属性本身，按 overflow → 滚动容器 → top/高度这条线走一遍；大多数吸顶导航都能在这一轮里回到预期。