如何將活動類添加到滾動我的事件的正確導航項中？

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 - > ...等一個