电商侧边栏滚动联动高亮需监听页面滚动，遍历分类区块判断可视区域，用matches精确匹配侧边栏href与section id，再添加active类；需注意dom结构对齐、requestanimationframe节流及首次执行初始化。
在电商分类侧边栏中实现滚动联动高亮，核心是：监听页面滚动 → 获取当前可视区域对应的分类区块 → 找到对应侧边栏菜单项 → 用 matches 判断是否匹配目标选择器，再添加高亮类。
1. 结构前提：确保 DOM 具备可匹配的锚点关系
侧边栏菜单项（.sidebar-item）需和页面中各分类内容区块（.category-section）存在明确对应关系。推荐用 data-id 或 href 属性对齐：
- 侧边栏项：
<a href="#electronics" class="sidebar-item">数码电器</a> - 内容区块：
<section id="electronics" class="category-section">...</section>
这样滚动时可通过 section.id 和 a.getAttribute('href') 建立映射，后续用 matches 验证更安全（比如支持 #electronics.active 这类动态状态）。
2. 滚动监听 + 可视区域判断
不用监听每个区块的 getBoundingClientRect，而是遍历所有 .category-section，找出第一个「顶部已进入视口且未完全滚出底部」的区块：
const sections = document.querySelectorAll('.category-section');
const sidebarItems = document.querySelectorAll('.sidebar-item');
<p>function highlightActive() {
let currentSectionId = '';</p><p>for (const section of sections) {
const rect = section.getBoundingClientRect();
// 视口高度的 1/3 处开始触发高亮（提升体验）
if (rect.top 0.7 && rect.bottom >= window.innerHeight 0.2) {
currentSectionId = section.id;
break;
}
}</p><p>// 清空所有高亮
sidebarItems.forEach(item => item.classList.remove('active'));</p><p>// 找到匹配的侧边栏项并高亮
const targetItem = Array.from(sidebarItems).find(item =>
item.matches(<code>a[href="#${currentSectionId}"]</code>) // 精确匹配 href
);</p><p>if (targetItem) targetItem.classList.add('active');
}</p><p>window.addEventListener('scroll', highlightActive);
highlightActive(); // 初始化执行一次
</p>
3. matches 的实用技巧：支持动态或复合选择
matches() 不仅能做字符串相等判断，还能应对更灵活场景：
- 支持伪类：
item.matches('a.active')可配合 JS 动态加类做双重校验 - 支持属性通配：
item.matches('a[href$="electronics"]')匹配 href 结尾为 electronics - 避免硬编码 ID：
item.matches(`a[data-target="${currentSectionId}"]`)更语义化
注意：matches 必须在元素上调用，不能直接传入选择器字符串；且要确保元素已挂载到 DOM 中（避免 querySelectorAll 后节点被移除）。
4. 性能与边界优化建议
滚动事件高频触发，需轻量处理：
- 用
requestAnimationFrame节流（比 debounce 更顺滑） - 只在
window.scrollY > 100后才启用高亮逻辑（避开头部导航干扰） - 若侧边栏是固定定位（
position: sticky），注意getBoundingClientRect返回的是相对视口坐标，无需额外计算 offsetTop - 首次加载时主动触发一次
highlightActive()，防止首屏默认不亮
不复杂但容易忽略：确保 CSS 中 .active 类有明确样式（如 color: #ff6700; font-weight: bold;），否则逻辑正确也看不到效果。
