如何将活动类添加到滚动我的事件的正确导航项中？

Question

所以我有一个页面，当你滚动到相应的部分时，活动菜单项被突出显示。

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

document.querySelector('nav a[href="' + anchorID + '"]').classList.add("active");

1. 在window.onscroll for循环收集所有从菜单

   锚（nav a）

2. 然后我可以访问个人anchorIDs（的HREF）有：

var anchorID = anchorsArray[i].getAttribute("href");

我不明白，是.active类如何被添加到基于视窗内当前部分正确anchorID - 在没有比较的部分ID和相应的锚HREF之间进行。例如。在href &部分ID：

• <a href="#section-2" class="">Section 2</a>
• <section id="section-2"></section>

..are上滚动从未进行比较。

DEMO：https://jsfiddle.net/zgpzrvns/

所有JS

(function() { 
 
     var anchorsArray = document.querySelectorAll("nav a"); 
 
     var sections = document.querySelectorAll("section"); 
 
     var sectionsArray = []; 
 
     
 
     // Collect all sections and push to sectionsArray 
 
     for (var i = 0; i < sections.length; i++) { 
 
     var section = sections[i]; 
 
     sectionsArray.push(section); 
 
     } 
 
     
 
     window.onscroll = function() { 
 
     var scrollPosition = window.pageYOffset; 
 
    
 
     for (var i = 0; i < anchorsArray.length; i++) { 
 
      // Get hrefs from each anchor 
 
      var anchorID = anchorsArray[i].getAttribute("href"); 
 
      
 
      var sectionHeight = sectionsArray[i].offsetHeight; 
 
      var sectionTop = sectionsArray[i].offsetTop; 
 
    
 
      if (
 
      scrollPosition >= sectionTop && 
 
      scrollPosition < sectionTop + sectionHeight 
 
     ) { 
 
      /** 
 
      * I don't understand how querySelector finds & adds the active 
 
      * class to the correct anchor, when no comparison is made between the 
 
      * section ID (that is inside current section in viewport) and the 
 
      * anchors ID from anchorsArray 
 
      */ 
 
      document 
 
       .querySelector('nav a[href="' + anchorID + '"]') 
 
       .classList.add("active"); 
 
      } else { 
 
      document 
 
       .querySelector('nav a[href="' + anchorID + '"]') 
 
       .classList.remove("active"); 
 
      } 
 
     } 
 
     }; 
 
    })();

总结：的active类是如何加入到纠正锚ID，当内部的相应部分ID滚动时的视口（在滚动事件中从未检测到部分ID？）

我对此很困惑，我敢打赌这是我忽略的一些愚蠢的东西！

将不胜感激一些输入！ :-)

Answer 1

简而言之： 它并不需要比较任何标识，因为在滚动您遍历在您的导航所有锚。对于您检查的每一个，如果相同索引的部分在视口中。如果是这样，你添加活动类。

如果您打开导航项目的位置，你会看到，它会主动类添加到了错误的项目，因为它只是检查索引。

如果您需要更多解释，请告诉我。然后去编辑答案。

编辑索引解释：

你有你的导航锚在阵列中，也你的部分。

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

你是循环的锚阵列

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

，然后你会得到相同的索引处的高度和你部分的顶部位置的锚（变量i）

var sectionHeight = sectionsArray[i].offsetHeight; 
var sectionTop = sectionsArray[i].offsetTop; 

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

然后你设置活动类如果它是真的，或者删除它，如果它是假的。

等各个滚动你的代码执行以下操作：

获取锚一个 - >检查部分一个在范围内 - >如果是 - >添加活跃 - >否则删除活跃

获取锚2 - >检查部分二是在范围 - >如果是 - >添加活跃 - >否则删除活跃

获取锚3 - > ...等一个