滚动到页面中的特定部分时无法激活链接

Question

我正在使用纯 JavaScript 执行登录页面功能，并且不允许使用任何库。 我想在滚动时制作一个链接到要激活的特定部分。 所以我做了一个辅助函数IsInViewPort()来检测滚动页面时的位置。

我正在尝试创建一个滚动功能，在页面中的部分内循环以将指定部分添加到 classList 并使其从导航栏中的链接处于活动状态。 当我添加此功能时，出现“意外标识符”错误，导航栏消失了。 如何解决？ 全局变量：

const sections = document.getElementsByTagName('section');
const addToNav = document.querySelector('ul');
const myLinks = document.getElementById("navbar__list");

辅助功能：

    const isInViewport = elem => {
  let distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <=
      (window.innerWidth || document.documentElement.clientWidth)
  );
};

功能：

window.addEventListener("scroll" , e=>{
  for(let i=0 ; i<sections.length;i++){
    if(isInViewport(sections[i])){
      sections[i].classList.add("your-active-class");
      var activateLink = document.getElementsByClassName(''+[i]+'')[0];
      activateLink.classList.add("active");
    }
    else{
      sections[i].classList.remove("your-active-class");
      var activateLink = document.getElementsByClassName(''+[i]+'')[0];
      activateLink.classList.remove("active");
    }
  }
});

到目前为止，这是我的项目： https : //jsfiddle.net/dode2/yqne0orj/1/ my issue in //Set sections as active 。

Answer 1

“意外标识符”是由您的“int i=0”引起的，应该让 i=0

以下代码：

window.addEventListener("scroll" , e=>{
for(int i=0 ; i<=sections.length;i++){
    if(isInViewport(sections[i])){
        sections[i].classList.add("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.add("active");
    }
    else{
        section.classList.remove("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.remove("active");
    }
}

应该：

window.addEventListener("scroll" , e=>{
for(let i=0 ; i<=sections.length;i++){
    if(isInViewport(sections[i])){
        sections[i].classList.add("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.add("active");
    }
    else{
        section.classList.remove("your-active-class");
        document.getElementsByClassName(`${sections[i].id}`)[0].classList.remove("active");
    }
}

这将解决您的错误。