Javascript 如何将活动类添加到scroll my事件中的正确导航项？

因此，我有一个页面，当您滚动到相应的部分时，活动菜单项会突出显示

我的代码可以工作，但我不明白为什么，特别是这一部分：

document.querySelector（'nav a[href=“”+anchorID+”）.classList.add（“active”）

在window.onscroll上，for循环从菜单中收集所有锚点（
nava
）

然后，我可以通过以下方式访问各个anchorIDs（HREF）：

var-anchorID=anchorsArray[i].getAttribute（“href”）

我不明白的是，
.active
类是如何根据视口中的当前节添加到正确的anchorID中的-当节id和相应的anchor href之间没有进行比较时。例如，href§ion id：





…永远不会在卷轴上进行比较

演示：

所有的JS


（函数（）{
var anchorsArray=document.queryselectoral（“导航a”）；
var sections=document.queryselectoral（“section”）；
var sectionsArray=[]；
//收集所有部分并推送至部分Sarray
对于（变量i=0；i=截面顶部&&
滚动位置<截面顶部+截面高度
) {
/**
*我不明白querySelector如何查找和添加活动
*当没有比较
*截面ID（位于视口中当前截面的内部）和
*来自anchorsArray的锚ID
*/
文件
.querySelector（'nav a[href=“”+anchorID+“]”）
.classList.add（“活动”）；
}否则{
文件
.querySelector（'nav a[href=“”+anchorID+“]”）
.classList.remove（“活动”）；
}
}
};
})();简而言之：
它不需要比较任何ID，因为在scroll上，您可以循环浏览导航中的所有锚。对于每次检查，如果相同索引处的剖面位于视口中。如果是，则添加活动类

如果切换导航项的位置，您将看到它将活动类添加到错误的项，因为它只是检查索引

如果你需要更多的解释，告诉我。那就编辑答案吧

编辑索引说明：

你有你的导航锚在一个数组中，也有你的部分

var anchorsArray = document.querySelectorAll("nav a");
var sections = document.querySelectorAll("section");

你正在循环你的锚数组

for (var i = 0; i < anchorsArray.length; i++) {

for（变量i=0；i

然后你得到了你所在区域的高度和顶部位置，其索引与你的锚相同（变量i）

var sectionHeight=sectionsArray[i]。离视；
var sectionTop=sectionsArray[i]。偏移；
如果(
滚动位置>=截面顶部&&
滚动位置<截面顶部+截面高度
) {

然后设置活动类（如果为true），或者删除它（如果为false）

因此，在每次滚动时，您的代码都会执行以下操作：

获取锚点一->检查第一节是否在范围内->如果是->添加活动->否则删除活动

获取锚点二->检查第二节是否在范围内->如果是->添加活动->否则删除活动

获得锚定三->…和一个
谢谢。关于：“对于您检查的每个锚定，如果相同索引的部分在视口中。”-这是我没有得到的。它如何知道视口中的部分是否与获取活动类的相应锚点具有相同的索引？听起来好像有比较，但ID之间没有。我不知道为什么我没有得到它：S@Capax编辑我的答案以获得更详细的解释谢谢你@Daniel Ziegler.现在我明白了！这s是我完全忽略的部分：我从sectionHeight和sectionTop获得的索引变量来自循环的anchorsArray[I]——我在查看滚动事件外部的sectionsArray循环（认为sectionHeight[I]§ionTop[I]从该集合获得了索引变量，而不是锚循环内部的那个！
var sectionHeight = sectionsArray[i].offsetHeight;
var sectionTop = sectionsArray[i].offsetTop;

if (
    scrollPosition >= sectionTop &&
    scrollPosition < sectionTop + sectionHeight
) {