Build the "Active Link" Scroll Logic

[codeCraft-Ritik]

The project includes a main.js placeholder for "SCROLL SECTIONS ACTIVE LINK". Implementing this ensures the navigation menu highlights the section the user is currently viewing.

File Path : assets/js/main.js

JS Code :

const sections = document.querySelectorAll('section[id]')

const scrollActive = () =>{
  const scrollDown = window.scrollY

  sections.forEach(current =>{
    const sectionHeight = current.offsetHeight,
          sectionTop = current.offsetTop - 58,
          sectionId = current.getAttribute('id'),
          sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')

    if(scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight){
      sectionsClass.classList.add('active-link')
    }else{
      sectionsClass.classList.remove('active-link')
    }                                                    
  })
}
window.addEventListener('scroll', scrollActive)