const sections = document.querySelectorAll('section[id]')
function scrollActive(){
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 58,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add("active")
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove("active")
}
})
}
window.addEventListener('scroll', scrollActive)
document.querySelector is not guaranteed to return an Element. If no matching element is found it will return null. (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
So you're potentially saying: null.classList.remove(...)
Check that you've got an element from the querySelector before using it, e.g:
const element = document.querySelector('.nav__menu a[href*=' + sectionId + ']')
if (!element) return; // early return
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
element.classList.add("active")
} else {
element.classList.remove("active")
}