How can I make the toggleClass dependent on page scrolling affect all classes, and not just the first one?

Question

JavaScript

Hello, I have a toggle which depends on page scroll:

const link = document.querySelector('.header__link');

window.addEventListener('scroll', function(){
  link.classList.toggle('cactive', pageYOffset > 0);
});

But it only affects one .header__link , is it possible to have toggleClass affect all .header__link s?
querySelectorAll doesn't help

Answer 1

querySelector()returns only one, the first element found. And everything is necessary. This makes querySelectorAll()

const links = document.querySelectorAll('.header__link');

window.addEventListener('scroll', function(){
  links.forEach((el) => el.classList.toggle('cactive', pageYOffset > 0));
});

Answer 2

https://developer.mozilla.org/ru/docs/Web/API/Docu...