滑块定位必须通过 JS 动态获取 getBoundingClientRect() 计算真实渲染位置，而非写死 left/width；需在页面加载、菜单变更、窗口 resize（节流）时重新计算，并减去父容器偏移以确保相对定位准确。
滑块定位依赖于导航项的 DOM 位置计算
直接写死 left 和 width 值无法适配响应式或动态增删菜单项，必须通过 JS 获取真实渲染后的位置。关键不是“加动画”，而是每次菜单变化（包括窗口 resize）后，重新调用 getBoundingClientRect() 获取目标导航项的 left 和 width。
常见错误是只在页面加载时计算一次，结果切换菜单项或缩放浏览器后滑块错位。正确做法是封装一个更新函数，并在以下时机触发：
- 页面加载完成（
DOMContentLoaded） - 导航项内容或结构变更（如 Vue/React 中
nextTick或useEffect） - 窗口尺寸变化（
resize事件，建议节流）
如何用 JS 动态设置滑块的 left 和 width
假设滑块元素为 <div class="slider"></div>，且与导航项同级、位于其下方；每个导航项有类名 nav-item，当前激活项加类 active。JS 需获取 .active 元素的位置，并同步到滑块上：
const slider = document.querySelector('.slider');
const activeItem = document.querySelector('.nav-item.active');
<p>if (activeItem && slider) {
const rect = activeItem.getBoundingClientRect();
const navRect = document.querySelector('.nav').getBoundingClientRect();</p><p>slider.style.left = <code>${rect.left - navRect.left}px</code>;
slider.style.width = <code>${rect.width}px</code>;
}注意：这里减去父容器 navRect.left 是为了转成相对于导航容器的偏移，否则在有滚动或定位父元素时会出错。
立即学习“前端免费学习笔记（深入）”；
为什么不能只靠 CSS 的 transform: translateX() 模拟跟随
单纯用 transform 移动滑块，虽然性能好，但无法自动匹配不同宽度的导航项——你仍需 JS 计算每项的 offsetLeft 和 offsetWidth，而这些值在 flex 或 justify-content: space-between 布局下不可靠。相比之下，getBoundingClientRect() 返回的是最终渲染像素值，不受布局方式干扰。
另外，若导航项使用了 scale()、rotate() 等 transform，offsetLeft/offsetWidth 会失效，但 getBoundingClientRect() 依然准确。
兼容性与性能要注意的点
getBoundingClientRect() 在所有现代浏览器中支持良好，IE9+ 也支持，无需 polyfill。但频繁调用会影响性能，尤其在 resize 时：
- 务必对
resize事件做节流（如 60ms 一次） - 避免在滚动或动画帧中反复读取 layout（如在
requestAnimationFrame中多次调用） - 如果导航项数量多（>50），可缓存
rect结果，仅在active切换时重算
滑块本身推荐用 position: absolute + top: 100% 定位，不要用 margin-top 或 transform 模拟底部对齐，否则容易因字体渲染、行高差异导致垂直偏移。
