position: sticky 是首选方案，因其轻量、无重排风险且天然兼容无障碍；它需配合 top 值及最近有边界的祖先容器生效，失效常因父容器 overflow 未设、高度塌陷或祖先触发层叠上下文。
为什么 position: sticky 是首选方案
大多数现代浏览器已原生支持 position: sticky，它比 JavaScript 滚动监听更轻量、无重排风险，且天然兼容无障碍。关键在于：它不是“固定在视口顶部”，而是“在滚动到某位置时才粘住”，所以必须配合 top 值和**最近的有边界的祖先容器**生效。
常见失效原因：sticky 元素父容器没有设置 overflow（如 hidden、auto）、或父级高度塌陷、或祖先设置了 transform/filter 等触发层叠上下文的属性——这些都会让 sticky 失效。
实操建议：
- 给导航条直接加
position: sticky; top: 0; - 确保其直接父容器有明确高度或内容撑开（避免
height: 0或空父级） - 避免在任意上层祖先使用
transform: translateZ(0)、will-change: transform、filter: blur(1px)等 - 必要时加
z-index: 1000防止被其他元素遮挡
IE 和旧版 Safari 下 fallback 到 position: fixed 怎么写
position: sticky 在 IE 完全不支持，Safari ≤ 12.1 也存在兼容问题。纯 CSS fallback 不可行，必须用 JS 判断并切换定位方式。
立即学习“前端免费学习笔记（深入）”；
核心逻辑是监听 scroll，计算导航条距视口顶部距离，当 getBoundingClientRect().top 时，切为 <code>fixed；否则还原为 relative 或 static。
注意点：
- 别用
window.onscroll直接绑定，要throttle（节流）或用requestAnimationFrame避免频繁触发 - 切换
fixed后，页面会因导航条脱离文档流而产生“跳动”，需提前记录原位置并补margin-top或padding-top - 用
getComputedStyle(nav).position === 'sticky'检测是否原生支持，只对不支持的设备启用 JS 逻辑
示例判断逻辑：
if (!CSS.supports('position', 'sticky')) {
// 启用 fixed fallback
}
移动端 iOS Safari 滚动卡顿怎么缓解
iOS Safari 对 position: sticky 的实现曾长期存在性能问题，尤其在快速滚动或页面含大量 DOM 时容易掉帧。这不是 bug，而是渲染引擎对 sticky 元素的重绘策略较重。
有效缓解手段：
- 给导航条添加
backface-visibility: hidden或transform: translateZ(0)强制 GPU 加速（注意：这本身会让 sticky 失效，所以仅用于 fixed fallback 场景） - 避免导航条内使用
box-shadow、border-radius过大、或背景渐变（改用纯色） - 确保导航条高度固定（不要用
min-height或内容撑高），减少 layout 计算 - 如果用 JS fallback，务必用
passive: true绑定 scroll 事件：el.addEventListener('scroll', handler, { passive: true })
导航条高度变化时如何避免布局抖动
响应式场景下，导航条可能从 60px 缩为 48px（比如滚动后 logo 变小），若用 fixed + JS 控制，高度突变会导致下方内容突然上移——用户感知明显。
稳妥做法是保持导航条容器高度恒定，仅内部元素缩放：
- 用
padding或line-height控制视觉高度，而非直接改height - 缩小时用
transform: scale(0.8)并配transform-origin: left center，避免影响布局流 - 若必须改高度，用
transition: height 0.3s ease，同时给 body 加等量margin-top补偿
最简方案：始终设 min-height: 60px，内部内容垂直居中，缩小只是视觉调整，不触发布局重排。
