给侧边栏标题设了吸顶,滚动时完全不动,像普通元素一样划走。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,祖先元素设置了溢出隐藏或滚动,sticky 的参照容器变成该祖先,粘附范围被限制在很小的一段里。

「sticky 不生效」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

.wrap { overflow: visible; }
.side-title { position: sticky; top: 16px; z-index: 2; }

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。

能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

具体做法是,逐层检查祖先的 overflow;去掉中间层的裁剪;确保粘附元素有明确偏移值。

最后用这个标准收尾,滚动时标题停留在顶部指定位置。

作者 9823189