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

Question

我正在使用纯JavaScript进行着陆页功能，并且不允许使用任何库。我想滚动链接到特定部分以使其处于活动状态。所以我做了一个辅助函数IsInViewPort（）来在滚动页面时感知位置。我正在尝试制作一个滚动功能，在页面的各部分内循环，以将指定的部分添加到classList中，并使其从navbar的链接处于活动状态。当我添加此功能时，出现错误消息“意外标识符”，并且导航栏消失了。如何解决？全局变量：

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(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");
    }
}

}）;

到目前为止，这是我的项目：https://jsfiddle.net/dode2/yqne0orj/1/我的问题//将部分设置为活动状态

非常感谢您的帮助。

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");
    }
}
这将解决您的错误。