position: sticky 必须设置 top、bottom、left 或 right 才生效，否则降级为 static；父容器禁用 overflow: hidden/clip 和 transform；移动端需注意 iOS Safari 兼容性及软键盘影响。
position: sticky 必须配 top 或 bottom 才生效
很多人加了 position: sticky 却没反应，根本原因是漏写了偏移量。浏览器规范强制要求：sticky 元素必须显式设置 top、bottom、left 或 right 中的至少一个，否则它会被降级为 position: static，完全不 sticky。
常见错误写法：.nav { position: sticky; } —— 这行代码等于没写。
正确写法示例：
.nav {
position: sticky;
top: 0;
z-index: 100;
}
-
top: 0表示滚动到视口顶部时触发固定 - 若想吸底，用
bottom: 0；侧边栏吸右则用right: 0 - 父容器不能有
overflow: hidden或overflow: clip，否则 sticky 被截断 - 元素本身要有明确的高度或内容，空 div +
height: 0会导致触发区域不可靠
滚动监听只在 sticky 不适用时才需要补位
比如要实现“滚动过 200px 后才吸顶”，或者吸顶后还要动态改样式（如缩小字体、隐藏部分图标），这时 position: sticky 自身无法响应滚动距离阈值，就得用 JavaScript 监听 scroll 事件来切换类名。
立即学习“前端免费学习笔记（深入）”；
关键点不是“要不要监听”，而是“监听之后怎么配合 CSS”：
- 不要直接操作
element.style.position = 'fixed'—— 这会绕过 CSS 层级和 transition - 推荐用 class 切换：
element.classList.toggle('is-sticky', scrollTop > 200) - 对应 CSS 中定义：
.nav.is-sticky { position: fixed; top: 0; } - 记得给原本位置留空：吸顶后元素脱离文档流，下方内容会上顶，需在原位置加一个等高占位
<div class="nav-placeholder"></div>，并用 JS 同步控制其显隐
sticky 和 fixed 混用时的层级与定位陷阱
当页面同时存在多个 sticky/fixed 元素（比如顶部导航 + 右侧目录），容易出现遮挡或错位，问题通常出在三处：
-
z-index值没设或设得不够大 —— sticky 元素默认堆叠上下文较弱，建议统一设z-index: 100起步 - fixed 元素的
top值写死（如top: 60px），但实际导航高度可能随屏幕缩放或字体变化，应改用 JS 动态读取offsetHeight并赋值 - sticky 元素父容器设置了
transform、perspective或filter，这会创建新的层叠上下文，导致 sticky 失效 —— 遇到这类情况，要么去掉父级 transform，要么把 sticky 元素提到更高层级
移动端 iOS Safari 的 sticky 兼容细节
iOS 15.4+ 已全面支持 position: sticky，但仍有两个真实存在的坑：
- 在
直接滚动时，某些旧版 iOS Safari 对top的计算不准确，建议把滚动容器限定在某个<div class="scroll-container"> 内，并设 <code>overflow-y: auto，再对这个容器应用 sticky - 输入框聚焦唤起软键盘后，页面缩放或视口重算可能导致 sticky 元素短暂错位，此时可监听
resize事件，延迟 100ms 后强制重置类名 - 不要依赖
scroll-behavior: smooth和 sticky 同时作用 —— iOS 上两者叠加易引发跳动，优先保 sticky 稳定性
实际项目里最常被忽略的，是父容器的
overflow 和 transform 组合。一个 overflow: hidden 加一个 transform: translateZ(0)，就能让整个 sticky 区域彻底失灵，而控制台不会报任何错误。
