Question

拜托，我如何在滚动到每个部分时向每个部分添加一个类，我的问题是它只发生在第一部分。我是初学者，问题就在这里

window.onscroll = function() {
    allSections.forEach(section => {

        let activeLink = document.querySelectorAll("nav a").forEach;

        if(section.getBoundingClientRect().top >= -400 && section.getBoundingClientRect().top <= 150){

            section.classList.add("your-active-class");
            activeLink.classList.add("active-link");

        }

        else{
            section.classList.remove("your-active-class");
            activeLink.classList.remove("active-link");
        }
    
    })
}

代码在这里

https://codepen.io/mohamedtharwat000/pen/gOmwqqr

Answer 1

我不完全知道您想用 activeLink 变量实现什么目的，但删除它似乎可以解决您的问题。

window.onscroll = function() {

allSections.forEach(section => {

    if(section.getBoundingClientRect().top >= -400 && section.getBoundingClientRect().top <= 150)
        section.classList.add("your-active-class");
    else
        section.classList.remove("your-active-class");  
})}

Answer 2

我正在使用这个函数，它需要从顶部滚动的像素量。

function scrollFunction() {
 if(document.documentElement.scrollTop >= **Your Value** && document.documentElement.scrollTop <= **Your Value**){
            section.classList.add("your-active-class");
            activeLink.classList.add("active-link");
        }else{            
            section.classList.remove("your-active-class");
            activeLink.classList.remove("active-link");
        }

}
window.onscroll = function () {
  scrollFunction();
};

我在 window.onScroll 上调用它，它运行良好。希望我有所帮助。

Answer 3

请尝试这样。

let navA = document.querySelectorAll("nav a");
let sections = document.querySelectorAll("section");
window.onscroll = function() {
   var scrollPos = document.documentElement.scrollTop

   navA.forEach(a => {     
      var currLink = a;
      var refElement = document.getElementById(currLink.getAttribute("href").substring(1));                                      
      var bodyRect = document.body.getBoundingClientRect()
  
  var offset   = refElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
 
  if (offset <= scrollPos &&       offset + refElement.offsetHeight + 200 > scrollPos) {
            navA.forEach(item=>{
              item.classList.remove("active-link");
            })
            sections.forEach(sec=>{
              sec.classList.remove("your-active-class");
            });
           currLink.classList.add("active-link");
           refElement.classList.add("your-active-class");
        }
        else{
            currLink.classList.remove("active-link");
            refElement.classList.remove("your-active-class");
        }
 });    
}
navA.forEach(a => {
  a.addEventListener("click", function() {
    navA.forEach(item=>{
      item.classList.remove("active-link");
    });
    a.classList.add("active-link");
    let target = document.getElementById(currLink.getAttribute("href").substring(1));
    sections.forEach(sec=>{
      sec.classList.remove("your-active-class");
    });
    target.classList.add("your-active-class");
  });  
});

请确认此网址 https://codepen.io/btsm0714/pen/JjWRqXZ

当我滚动到某个部分时将类添加到它

3 个答案: