adding class to a section when I scroll to it

user_15962775 0
Viewed 209

Please, how can I add a class to each section when scrolling to it my problem is that it happens only in the first section. I am a beginner and the problem is here

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

code is here

https://codepen.io/mohamedtharwat000/pen/gOmwqqr
dom javascript
3 Answers

I don't exactly know what were you trying to achieve with activeLink variable, but removing it seems to solve you issue.

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

I'm using this function, which takes the amount of px scrolled from top.

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

I'm calling it on window.onScroll and it's working fine. Hope I helped.

user_157755760

Please Try like this.

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

Please confirm this URL https://codepen.io/btsm0714/pen/JjWRqXZ

user_155795730
Related