应使用 javascript 监听 window.scrolly 并结合节流判断滚动阈值，通过切换 class 控制 fixed 状态，同时添加布局补偿；纯 css 的 position: sticky 无法精确响应全局滚动距离。
滚动到指定位置才触发 fixed，为什么不能只靠 position: sticky
position: sticky 本身依赖父容器的滚动上下文，且触发时机由 top 值决定——它会在元素**顶部到达视口 top** 时粘住。但很多人想要的是“页面向下滚了 200px 后，导航栏才固定”，这和 sticky 的自然行为不一致：sticky 不关心整个页面滚了多少，只看自身在父容器内的相对位置。
所以纯 CSS 很难精确控制“全局滚动距离阈值”，必须结合 JS 监听 window.scrollY 来判断。
用 JS 判断滚动距离并切换 class 是最稳的方案
监听 scroll 事件，检查 window.scrollY 是否超过阈值（比如 120），然后给导航栏添加/移除一个类名，CSS 用该类控制 position: fixed 和布局补偿。
- 阈值建议设为导航栏原始高度或略高（避免滚动抖动），比如
const THRESHOLD = 120 - 务必节流
scroll事件，否则频繁触发影响性能；可用requestAnimationFrame或简单时间戳判断 - 加
fixed后，原位置会塌陷，需给 body 或 header 后元素补一个等高的margin-top或占位padding，否则内容会上跳 - CSS 中
.nav-fixed应设position: fixed; top: 0; width: 100%; z-index: 1000;，并确保不被其他元素遮挡
const nav = document.querySelector('.header-nav');
const THRESHOLD = 120;
let ticking = false;
<p>function updateNavState() {
const isScrolled = window.scrollY >= THRESHOLD;
nav.classList.toggle('nav-fixed', isScrolled);
}</p><p>window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
updateNavState();
ticking = false;
});
ticking = true;
}
});</p>
sticky + JS 混合用法：仅在满足条件时启用 sticky
如果仍想保留 sticky 的原生平滑性（比如兼容 iOS Safari 的 scroll-behavior），可以动态控制 sticky 的生效时机：把导航栏包进一个有明确高度的容器，JS 在滚动达标后给该容器设 height: auto 或移除限制，让 sticky 开始起作用。但这对 DOM 结构要求高，容易因父容器高度变化导致粘连失效。
- sticky 的父容器不能有
overflow: hidden|auto，否则截断粘连逻辑 - 不能依赖
body作为 sticky 父级，因为 body 高度随内容变，应包裹一层<div class="sticky-wrapper"> <li>JS 只负责开关 sticky 的“使能”状态，例如通过切换父容器的 <code>data-sticky-enabled属性，CSS 写[data-sticky-enabled] .nav { position: sticky; } - 这种写法调试成本高，一旦父容器高度计算不准，sticky 就卡在半途不动
- 不要在 scroll 回调里直接改
style.position，始终走 class 切换，利于 CSS 硬件加速 - 给
.nav-fixed加will-change: transform可缓解 iOS 重绘卡顿 - 若用
scroll-behavior: smooth，注意它会让scrollY在动画过程中“滞后”，判断阈值时可能误判，建议禁用或单独处理 - 真机测试比 DevTools 模拟更重要，特别是微信内置浏览器，它会忽略某些 fixed 行为
移动端要注意 touchcancel 和 scroll-behavior 兼容性
iOS Safari 在快速滚动时可能触发 touchcancel，导致 scroll 事件中断或延迟；同时部分安卓 WebView 对 position: fixed 渲染不稳定，出现闪烁或错位。
真正麻烦的不是加 fixed，而是 fixed 后的布局重排、z-index 层级穿透、以及不同设备上 scrollY 的采样精度差异——这些细节不实测根本发现不了。
