Add class active on scroll. Vanilla JS

Question

I'm new to vanilla js. I have a navbar with links to sections. I want to make the class active as soon as the section becomes active. If there are no active section, then remove the active class. Found such a script, but there is one drawback. If I am in an inactive section, the active class will remain with the previous active section.

const links = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.forJS');
  function changeLinkState() {
    let index = sections.length;

    while(--index && window.scrollY + 50 < sections[index].offsetTop) {}

    links.forEach((link) => link.classList.remove('active'));
    links[index].classList.add('active');
  }

changeLinkState();
window.addEventListener('scroll', changeLinkState);

section{
height:100vh;
scroll-y:auto;
}
.nav-link.active{
  color: red;
}





  
    

          
            
              Main
            
            
              About us
            
            
              Portfolio
            
            
              Contacts
            
          
    
  


Some info 1
Some info 2
Some info 3
Some info 4
Some info 5
Some info 6
Some info 7
Some info 8
Some info 9
Some info 10

P.S.Look at the last line, there is changeLinkState. Should it be without parentheses ()? And inside while is empty, why?

ggorlen · Accepted Answer

The most minimal change you can make using the current design to implement the desired functionality is testing the section's height to ensure it's visible instead of unconditionally adding the active class to the nearest navigation link as in the current code.

if (window.scrollY - sections[index].offsetHeight < 
      sections[index].offsetTop) {
  links[index].classList.add('active');
}

Instead of:

links[index].classList.add('active');

You can tweak the cutoff point with an offset like scrollY + 50 but hardcoding the number here seems non-ideal.

Full code:

const links = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.forJS');

function changeLinkState() {
  let index = sections.length;

  while (--index && window.scrollY + 50 < sections[index].offsetTop) {}

  links.forEach((link) => link.classList.remove('active'));

  // add the active class if within visible height of the element
  if (scrollY - sections[index].offsetHeight <
        sections[index].offsetTop) {
    links[index].classList.add('active');
  }
}

changeLinkState();
window.addEventListener('scroll', changeLinkState);

section {
  height: 100vh;
}

.nav-link.active {
  color: red;
}

section {
  border: 1px solid #555;
}





  
    
      
        
          
            Main
          
          
            About us
          
          
            Portfolio
          
          
            Contacts
          
        
      
    
  

  Some info 1
  Some info 2
  Some info 3
  Some info 4
  Some info 5
  Some info 6
  Some info 7
  Some info 8
  Some info 9
  Some info 10

Your other questions were addressed in the comments but I'll reiterate the answers here:

No parentheses are used on changeLinkState because we're passing the function object itself to the callback to be invoked later. If we invoked it like changeLinkState(), we'd wind up passing undefined into the callback and prematurely firing the handler, as explained here.
while is empty because its block that manipulates the termination condition (i.e. --index) is merged into the condition as shorthand, as described here.

Beyond that, there are multiple issues with the design I'll remark on briefly and leave as an exercise to the reader:

The bootstrap layout spreads the sidebar header across the whole page, so there's probably unintentional overlap between the header and the element. If the header had a background, content would be occluded. I'd revisit the structure here to ensure multiple, non-overlapping columns or a flow layout was used.
tags should be in a parent container.
CSS properties shouldn't be camelCased. forJS is not a particularly clear class name.
scroll-y:auto; is an invalid CSS property. Perhaps you meant overflow-y: auto;.
The strategy of firing the scroll event listener and iterating the sections is somewhat primitive. Check out throttling and consider refactoring to use an Intersection Observer.

Add class active on scroll. Vanilla JS

Answers (1)

Related Questions