原生JS实现电商侧边导航高亮效果

"原生js实现电商侧边导航效果，通过锚点定位和滚动监听事件，实现楼层跳转和高亮显示。" 在电商网站中，侧边导航通常用于帮助用户快速浏览不同商品分类或楼层。本文将介绍如何使用原生JavaScript来实现这样一个功能。侧边导航通常包括一系列楼层链接，当用户点击某个楼层链接时，页面会滚动到对应的商品区域，同时高亮显示所选楼层。 **实现原理** 1. **锚点定位**：在HTML中，可以通过`<a>`标签配合`href`属性和`id`属性实现页面内的链接跳转。例如，设置一个电梯链接`<a href="#item2">2F个护家清</a>`，当点击此链接时，页面会自动滚动到ID为`item2`的元素位置。对应的商品楼层标题可以设置为`<div class="floor-title" id="item2"></div>`。 2. **楼层高亮**：当页面滚动时，我们需要检测当前可视区域中的楼层，并高亮显示对应的楼层链接。这涉及到浏览器的滚动事件和元素定位。 **实现步骤** 1. **获取滚动高度**：使用`window.onscroll`函数监听浏览器滚动事件，通过`document.documentElement.scrollTop || document.body.scrollTop`获取当前滚动条的垂直偏移量。 2. **获取楼层信息**：获取所有楼层标题元素，可以使用`document.getElementById("wrap").getElementsByClassName("floor-title")`，其中`wrap`是包含所有楼层的容器ID，`floor-title`是楼层标题的类名。 3. **判断楼层状态**：遍历所有楼层，计算每个楼层的顶部距离（`offsetTop`），并与当前滚动高度进行比较。如果滚动高度大于楼层顶部距离减去一定值（如100像素，用于优化用户体验），则认为该楼层进入可视区域，将楼层ID存储为`thisID`。 4. **更新导航链接状态**：根据`thisID`，更新侧边导航中对应楼层的样式，实现高亮效果。这通常涉及到CSS类的添加和移除，如添加一个`active`类来改变背景色或边框。 5. **处理电梯按钮**：同时，也需要同步电梯按钮（楼层链接）的状态，确保当前选中的楼层链接与实际显示的楼层一致。 通过以上步骤，我们可以实现在页面滚动时动态更新侧边导航，提供良好的用户交互体验。注意，为了提高性能，可能需要考虑使用节流或防抖函数来避免频繁触发`onscroll`事件。此外，对于现代浏览器，可以利用Intersection Observer API来更高效地检测元素是否在视口内，从而减少性能消耗。