必须加消抖（debounce）而非节流，因scroll事件频率远超渲染帧率，裸写位置计算会导致高频重排重绘、侧边栏跳动及页面卡顿；推荐150ms延迟并用clearTimeout清除旧定时器，或改用IntersectionObserver实现零开销吸顶效果。
直接用 scroll 事件监听并实时计算侧边栏位置，会导致大量无效重绘和 CPU 占用飙升，尤其在滚动惯性或触摸板滑动时。必须加消抖（debounce），不是“可选”，是刚需。
为什么 scroll 事件里不能裸写位置计算
浏览器触发 scroll 的频率远高于渲染帧率（常达 60–120Hz），而 DOM 读写、getBoundingClientRect()、样式重排都是高开销操作。不加控制时，一次快速滚动可能触发上百次计算，但真正需要更新的位置可能只有 3–5 次。
常见错误现象包括：
- 侧边栏“抽搐式”跳动，尤其在 macOS 触控板滚动时
- 页面整体卡顿，DevTools Performance 面板显示密集的 Layout / Paint
- 移动端发热明显，甚至触发降频
debounce 实现要点：延迟执行 + 取消前序定时器
核心是保证“最后一次滚动停止后，才执行位置更新”。不能用节流（throttle），因为节流仍会固定频率触发，而我们只关心最终静止状态。
实操建议：
- 延迟时间设为
150ms—— 太短（如50ms）仍可能在滚动未完全结束时触发；太长（如300ms）会导致视觉滞后 - 必须用
clearTimeout清除上一个定时器，否则旧任务会在新滚动后误执行 - 避免在 debounce 回调里再调用
getBoundingClientRect()以外的 DOM 写操作（如element.style.top = ...），写操作应放在回调末尾一次性完成
简短示例：
let scrollTimer = null;
function updateSidebarPosition() {
const sidebar = document.getElementById('sidebar');
const rect = sidebar.getBoundingClientRect();
// 仅在此处做最终定位计算和赋值
sidebar.style.transform = `translateY(${Math.max(0, window.scrollY)}px)`;
}
window.addEventListener('scroll', () => {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(updateSidebarPosition, 150);
});
比纯 JS debounce 更稳的替代方案：Intersection Observer
如果侧边栏只需在进入/离开视口时切换固定状态（比如 sticky 效果），IntersectionObserver 是更优解：它由浏览器原生调度，不依赖 scroll 事件，零帧率压力，且自动处理滚动方向、阈值、根容器等细节。
适用场景：
- 侧边栏需“吸顶”或“吸底”，而非全程跟随滚动偏移
- 目标元素有明确的进入/离开边界（如顶部距视口 10px 时开始 fixed）
- 需要兼容 Safari 15.4+ 或 Chrome 76+（当前已无兼容顾虑）
关键点：
- 不要监听
scroll后再手动调observe()，而是直接初始化 observer 并传入目标元素 - 把位置逻辑从
scroll移到callback中，避免双重监听 -
threshold: [0, 0.1]可提升响应精度，但非必需
容易被忽略的边界问题：fixed 元素脱离文档流后的占位塌陷
用 debounce 算出该 fixed 时，如果直接加 position: fixed，后续内容会突然上移——因为 fixed 元素不再占据原文档流空间。这不是 debounce 的问题，但常被一起暴露。
解决方式只有两个有效选择：
- 在 sidebar 原位置插入一个
height相同的占位<div>，fixed 时显示，非 fixed 时隐藏 - 改用
position: sticky（配合top: 0），它不脱离流，但需确认目标父容器没有overflow隐藏或transform属性干扰
别碰 margin-top 补偿，它在滚动中会因重排反复计算，反而放大抖动。
