如何确定最接近顶部的部分

Question

我制作了一个带有导航条的多节登录页，其中包含指向页面各节的链接。我需要为最靠近页面顶部的节的链接提供一个活动类。我尝试使用滚动事件侦听器，但它无法正常工作

//通过为当前部分提供导航栏活动状态来响应滚动

``document.addEventListener("scroll", function() {
  const scrollPos = document.body.scrollTop;
  let pos = 0;
  for (let i = 0; i < sec.length; i++) {
    // determining pos of current section
    pos+=sec[i].offsetHeight ;
    let secPos = sec[i].getBoundingClientRect().y;
    secPos - scrollPos <= 0 && secPos + pos >= scrollPos ? list[i].classList.add("active") : list[i].classList.remove("active")
    }
  });```

Answer 1

滚动事件正在正常工作，但是您的代码没有正确地处理您要列出的元素列表。

只是尝试更改list[]到sec[]

document.addEventListener( "DOMContentLoaded", function() {
 let sec = document.querySelectorAll('section');
  console.log(sec);
 sec[0].classList.add("active") 
 document.addEventListener("scroll", function() {
  const scrollPos = document.body.scrollTop;
  let pos = 0;
  for (let i = 0; i < sec.length; i++) {
    // determining pos of current section
    pos+=sec[i].offsetHeight ;
    let secPos = sec[i].getBoundingClientRect().y;    
    if ((secPos - scrollPos <= 0) && (secPos + pos >= scrollPos))   
      sec[i].classList.add("active");
    else
      sec[i].classList.remove("active");
    
  }
   
})
})

section {
  font-size:  80px;
  text-align: center;
  width: 300px;
  margin: 20px auto;
  background-color: pink;
  border: 1px solid red;
}

section.active {
  border: 1px solid blue;
  background-color: cyan;
}

<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>