Javascript 读取DOM（网页）中的位置并相应地更改navmenu类

我有一个导航菜单，链接到页面的某些部分。我想写一些JS，这样当滚动条通过HTML的相应部分时，就会在每个nav菜单项中添加一个类。我相信我已经知道如何将类添加到我的navmenu项中，那么在JS中是否有一种特定的方法来识别用户在DOM中的位置

为了动态更改导航栏中的类，我使用了如下方法：

jQuery（文档）.ready（函数（$）{
变量菜单项链接=$（“.menu li a”）；
菜单项链接。每个（功能（）{
if（$（this）.is（'[href*=“#DOM中的当前位置”]'））{
$（this.parent（）.addClass（'current-location'）；
}
})
});

---

其中，类将向导航菜单项添加突出显示/下划线，以显示用户在特定位置。

您可以使用任何

scroll spy

插件或使用以下实现

$（窗口）.bind（'scroll'，function（）{
var currentTop=$（窗口）.scrollTop（）；
var elems=$（'.scrollspy'）；
每个元素（功能（索引）{
var elemTop=$（this）.offset（）.top；
var elemBottom=elemTop+$（this）.height（）；
如果（currentTop>=elemTop&¤tTop，那么最终对我有效的是使用。我基本上只是在DOM的特定部分设置航路点，然后我可以定义我希望在这些地方发生的事情。下面是最后的代码：

jQuery（文档）.ready（函数（$）{
变量菜单项链接=$（“.menu li a”）；
菜单项链接。每个（功能（）{
如果（$（this）.is（'[href*=“#”]'））{
$（this.parent（）.removeClass（'current-menu-item current-menu-祖先'）；
}
})
新航路点({
元素：document.getElementById（'explore'），
方向：“向下”，
处理程序：函数（）{
console.log（“第一个航路点处于活动状态”）；
document.querySelector（“a[href='/manitoba/#explore']”）.parentElement.classList.add（'current-menu-item'，'current-menu-祖先'）；
document.querySelector（“a[href='/manitoba/#build']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
document.querySelector（“a[href='/manitoba/#connect']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
},
抵销：25%，
连续：假
});  
新航路点({
元素：document.getElementById（'explore'），
方向：'向上'，
处理程序：函数（）{
控制台日志（“停用航路点”）；
document.querySelector（“a[href=”/manitoba/#explore']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
},
抵销：35%，
});  
新航路点({
元素：document.getElementById（'build'），
处理程序：函数（）{
日志（“第二个航路点处于活动状态”）；
document.querySelector（“a[href='/manitoba/#build']”）.parentElement.classList.add（'current-menu-item'，'current menu-祖先'）；
document.querySelector（“a[href=”/manitoba/#explore']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
document.querySelector（“a[href='/manitoba/#connect']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
},
抵销：50%，
连续：假
}); 
新航路点({
元素：document.getElementById（'connect'），
处理程序：函数（）{
日志（“第三个航路点处于活动状态”）；
document.querySelector（“a[href='/manitoba/#connect']”）.parentElement.classList.add（'current-menu-item'，'current-menu-祖先'）；
document.querySelector（“a[href='/manitoba/#build']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
document.querySelector（“a[href=”/manitoba/#explore']”）.parentElement.classList.remove（'current-menu-item'，'current-menu-祖先'）；
},
抵销：50%，
连续：假
});  
});
我考虑过使用
scroll spy
，因为我们在网站上安装了bootstrap，但不幸的是，菜单设置为
标题
，而不是
导航
。起初我认为你的方法不适用，但在清楚地阅读之后，我认为它仍然可能..我会再试一次，然后再给你回复.