position: sticky 是最轻量的吸顶方案，现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+）原生支持，但 IE 不支持，iOS 13.0 及更早版本存在渲染异常；需用 CSS.supports 检测并降级 JS 实现，注意父容器约束、scroll 节流、内存泄漏防护及 touchmove 兼容。
吸顶导航用 position: sticky 最轻量，但兼容性得查清
现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+）原生支持 position: sticky，无需 JS 插件就能实现吸顶。但 IE 完全不支持，iOS Safari 13.0 及更早版本有渲染异常（比如滚动卡顿、脱离文档流）。如果项目必须兼容 iOS 12 或 Android 4.4 WebView，就得降级用 JS 监听 scroll + getBoundingClientRect() 手动控制 position: fixed。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先写 CSS：
.nav { position: sticky; top: 0; z-index: 100; }，并确保父容器没设置overflow: hidden或transform，否则会禁用 sticky 行为 - 用
if ('sticky' in CSS.supports('position', 'sticky'))做特性检测，再决定是否加载 JS 回退逻辑 - 别在
body直接设overflow-x: hidden—— 这会让 sticky 在某些安卓机型失效
JS 实现吸顶+隐藏双模式时，scroll 事件要节流防卡顿
监听滚动做“向下滚隐藏、向上滚显示”逻辑，若每次触发都重算位置，页面容易掉帧。尤其在低端安卓机或长列表页，未节流的 scroll 会频繁调用 getBoundingClientRect() 和 DOM 写入，直接拖慢主线程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame包一层，比setTimeout(..., 16)更准且省资源：let ticking = false;
function updateNav() {
if (!ticking) {
requestAnimationFrame(() => {
// 实际计算和 class 切换放这里
ticking = false;
});
ticking = true;
}
} - 记录上一次滚动方向和位置，只在
scrollTop变化超过 5px 且方向明确时才触发状态切换，避免微小抖动误判 - 隐藏动画用
transform: translateY(-100%)而非display: none，前者可硬件加速，后者会触发回流
Vue/React 项目里别在组件挂载后直接监听 window.scroll
单页应用中，如果在 mounted（Vue）或 useEffect（React）里加 window.addEventListener('scroll', ...)，但没在卸载时移除，会导致内存泄漏和跨路由时逻辑错乱——比如从首页跳到详情页，吸顶逻辑还在后台运行，干扰新页面滚动行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue：在
beforeUnmount钩子中调用window.removeEventListener；若用组合式 API，把addEventListener和清理函数一起 return 出来 - React：
useEffect的清理函数必须返回removeEventListener，且监听函数不能是内联箭头函数（否则每次 render 都新建，无法正确移除） - 更稳妥的做法：用 IntersectionObserver 替代 scroll 监听判断导航是否进入视口，它本身是异步且低开销的，适合复杂布局
移动端真机测试时，touchmove 滚动和 scroll 事件触发时机不同
iOS Safari 和部分安卓浏览器中，手指拖动时 scroll 事件可能延迟触发（尤其启用了 overscroll-behavior: contain），导致吸顶状态更新滞后半拍。用户已经滚出屏幕了，导航还挂着；或者快速回拉时，导航突然闪一下才隐藏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对 iOS 设备，额外监听
touchmove并同步更新状态，但注意避免重复执行 —— 可用isScrolling标志位锁住 - 给导航加
will-change: transform，提前告诉浏览器该元素会频繁变化，减少合成层切换开销 - 真机调试时关掉 Chrome DevTools 的 “Emulate touch events”，它模拟的触控行为和真机差异很大，容易掩盖真实问题
overflow: hidden 或漏掉 touchmove 兼容，就会让整个体验断层。 
