sticky定位必须配合top或bottom才生效，仅设position: sticky无效；父容器不能有overflow:hidden/auto/scroll；IE不支持，safari旧版存在抖动；元素需有明确高度才能正常吸附。
sticky 定位必须配合 top / bottom 才生效
单纯写 position: sticky 不会触发粘性效果，浏览器根本不会当作 sticky 处理。必须显式指定 top（最常用）或 bottom 值，比如 top: 0 表示滚动到顶部时吸附在视口顶部。
常见错误是只写 position: sticky 然后发现完全没反应，检查控制台也无报错——问题就出在这里。
-
top: 0是最稳妥的起点，尤其用于导航栏固定 -
top: 10px表示距离视口顶部 10px 时开始吸附 -
bottom: 0在滚动到底部区域时生效，但兼容性和触发逻辑更难预测 - 不能同时设
top和bottom，否则行为未定义
父容器不能有 overflow: hidden / auto / scroll
sticky 元素的“吸附范围”由最近的、具有滚动机制的**非 Static 定位祖先**决定。如果父级设置了 overflow: hidden 或 overflow: auto，它就会成为 sticky 的“边界容器”，导致元素提前停止吸附，甚至完全不 sticky。
典型场景：把导航栏放进一个带 overflow: hidden 的 .header-wrapper 里，position: sticky 就会失效。
立即学习“前端免费学习笔记（深入）”；
- 检查祖先链，用浏览器开发者工具的“Computed”面板看
overflow计算值 - 临时改成
overflow: visible测试是否恢复 sticky 行为 - 若必须限制父容器溢出，可考虑用
clip-path或外层再包一层容器来隔离
IE 不支持 sticky，移动端 Safari 旧版本有渲染抖动
position: sticky 在 IE 中完全无效，Safari 15.4 之前存在滚动时位置跳变或吸附延迟的问题。不是“不支持”，而是“支持得不稳”。
如果你的用户仍有较老 ios 设备（如 iphone 8 / iOS 14），或者需要兼容企业内网 IE11，就得准备降级方案。
- 用 javaScript 监听
scroll+getBoundingClientRect()模拟 sticky（轻量级库如stickybits可直接引入） - css 方案：对不支持的浏览器用
@supports not (position: sticky)回退为position: relative或fixed - 注意
fixed会脱离文档流，可能影响后续布局，而 sticky 不会
sticky 元素必须有明确的高度或内容撑开
如果 sticky 元素内部为空、或仅含 display: inline 内容且未设置 min-height，它可能在视觉上“消失”或吸附位置异常。这不是 bug，而是因为粘性定位仍依赖元素自身的盒模型尺寸参与计算。
例如一个空的
加了 position: sticky; top: 0，它不会占空间，也不会吸附——因为根本没有高度可锚定。
- 加
min-height: 60px或height: 60px明确高度 - 确保子元素不是全
position: absolute，否则父容器高度塌陷 - 用
padding或伪元素::before { content: ""; display: block; }也能撑高
实际项目中，最容易被忽略的是祖先容器的 overflow 设置和 Safari 旧版的抖动表现——这两个点不排查，光调 top 值毫无意义。