Javascript 导航栏“突出显示”功能

我编写了JQuery，当查看相应的页面部分时，它会在导航栏上突出显示“关于”、“我的项目”或“联系我”文本。为此，我使用了一个滚动事件侦听器：

$(document).scroll(function myFuction() {
    if ($(document).scrollTop() >= $("#contactMe").offset().top) {
        $("#contactButton").addClass("active");
        $("#projectButton").removeClass("active");
        $("#aboutButton").removeClass("active");       
    } else if ( $(document).scrollTop() > $("#portfolio").offset().top && $(document).scrollTop() < $("#contactMe").offset().top) {
        $("#contactButton").removeClass("active");
        $("#projectButton").addClass("active");
        $("#aboutButton").removeClass("active");
    } else if ( $(document).scrollTop() > $("#about").offset().top && $(document).scrollTop() < $("#portfolio").offset().top)  {
        $("#contactButton").removeClass("active");
        $("#projectButton").removeClass("active");
        $("#aboutButton").addClass("active");
    }
});

当用户滚动时，该函数通过scrollTop检查页面顶部的位置，然后添加或删除有效高亮显示相应文本的活动类

虽然我知道在事件侦听器中执行某个操作通常是个坏主意，但我不知道如何才能完成我要做的事情。也许我在这里重新发明轮子

---

我本以为引导程序库会有一个预打包的类来实现这一点，但没有运气找到它。

您可以为所有这些项获得一些类，将它们缓存为jQuery集合，并滚动检查它们是否在视口中-基于此，您可以执行所需的操作

快速演示：

变量$items=$'.item' var$window=$window； var$document=$document； 外部端口函数{ var rect=el.getBoundingClientRect； 回来 rect.bottom>0&& 右矩形>0&& 矩形左<$window.width&& 矩形顶部<$window.height ; }; $document.on'scroll'，函数{ $items.eachfunction{ 如果看到这个{ $items.removeClass'active'； $this.addClass'active'； 返回false； } } }.触发“滚动”； .项目{ 宽度：100%； 高度：150像素； 边缘底部：50px； 背景色：ddd； } .item.active{ 背景：红色； } 1. 2. 3. 4. 5. 6. 7. 8. 9

---

10$contactButton.removeClassactive$projectButton.addClassactive$aboutButton.removeClassactive；为什么要多次复制和粘贴代码？这可以通过为导航栏的每个声音使用一个特定的类来优化，当您使用特定的类时，您可以从其他类中删除，然后只添加到您想要的类中。感谢您的示例-您是否看到我目前使用的代码有任何性能问题？您的代码肯定可以改进。不缓存jQuery对象会导致它在每次调用scroll时搜索它。据我所知，jQuery在默认情况下不会被缓存，所以在最坏的情况下，您的代码将在每次滚动调用中搜索节点14次，并且滚动事件可以在每次滚动调用中触发数百次。另外，使用if-else块检查哪个元素处于活动状态非常难缩放和读取。@MateuszStaniuk感谢您缓存jQuery对象。需要更多的答案来证明这种易于实现的性能增强。Oh和+1用于使用$prefix约定将变量的内容标识为jQuery对象/集合。