position: sticky 必须配合 top/bottom/left/right 才生效，否则无效；overflow: hidden 会切断其滚动上下文导致失效；可用 box-shadow + JS 切换类实现阴影过渡；需注意移动端层叠上下文和父容器滚动空间。
position: sticky 必须配 top/bottom 才生效
很多人写完 position: sticky 发现完全没反应，第一反应是“浏览器不支持”——其实大概率是漏写了触发阈值。sticky 不是开关式属性，它必须配合 top、bottom、left 或 right 中至少一个才能激活。比如导航栏吸顶，就得写 top: 0；表格表头冻结在顶部下方 10px，就写 top: 10px。
常见错误：
– 只写 position: sticky，没设任何偏移量
– 偏移量设成负值（如 top: -20px），导致元素一进来就“粘”出视口外，看起来像消失
– 在 flex 或 grid 容器中用了 align-items: center 等居中行为，意外压缩了父容器高度，使子元素没滚动空间
overflow: hidden 是 sticky 最常见的隐形杀手
position: sticky 的作用范围严格受限于它的**最近滚动祖先**。只要任意上级元素（包括父、祖父等）设置了 overflow: hidden、overflow: scroll 或 overflow: auto，就会创建新的包含块（containing block），直接切断 sticky 的滚动上下文——此时元素永远“感知不到”滚动，也就不会触发粘性行为。
排查建议：
– 用浏览器开发者工具逐层检查祖先元素的 overflow 计算值
– 临时删掉疑似元素的 overflow 声明，看 sticky 是否恢复
– 如果必须保留 overflow（比如卡片内滚动），就把 sticky 元素上提一层，放到有滚动能力的容器里
立即学习“前端免费学习笔记（深入）”；
box-shadow + transition 实现平滑阴影渐变
原生 position: sticky 切换时是瞬时的，容易显得生硬。加阴影过渡能视觉上缓冲这个突变。关键不是给 position 加 transition（它不支持动画），而是监听粘性状态变化后，对 box-shadow 做渐变：
.nav {
position: sticky;
top: 0;
background: white;
/* 初始无阴影 */
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: box-shadow 0.3s ease;
}
.nav.sticky-active {
/* 粘住后加阴影 */
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}注意：
– 需配合 JavaScript 监听 getBoundingClientRect().top 或 IntersectionObserver 判断是否已粘住，动态加 .sticky-active 类
– 不要只依赖 :hover 或伪类，因为粘性状态和鼠标无关
– 阴影模糊值（如 12px）不宜过大，否则移动端重绘压力明显
移动端 z-index 和背景融合容易被忽略
在 iOS Safari 或部分安卓 WebView 中，sticky 元素有时会“沉”在内容下面，尤其当背景是 background-attachment: fixed 或使用 backdrop-filter 时。这不是 bug，而是层叠上下文（stacking context）被意外创建的结果。
解决方法：
– 给 sticky 元素显式设置 z-index: 100（数值需高于其兄弟元素）
– 避免在 sticky 元素的父级上用 transform、opacity 、<code>will-change 等触发新层叠上下文的属性
– 若需毛玻璃效果，把 backdrop-filter 放在 sticky 元素自身上，而不是父容器
最易被忽略的一点：sticky 元素的“粘性边界”是其父容器的滚动区域，不是整个页面。如果父容器高度刚好等于 sticky 元素高度，它根本没有机会“粘”，这点在响应式断点切换时特别容易出问题。
