Как сделать так чтобы js добавлял класс при определенной прокрутке странице и убирал её?

Question

[senator]

Здравствуйте, мне нужно сделать так:

Если прокрутка window.pageYOffset не будет равна 0, т.е началу,
то мне нужно добавлять класс .active тегу с классом .navbar.

И если скролл обратно возвращался на свое начало (0), то нужно убирать класс .active .
И это должно работать без перезагрузки страницы.

Я сделал только с инструкцией if у меня не получилось, нечего не работает вообще

Answer 1

[Сергей delphinpro]

const navbar = document.querySelector('.navbar');

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

https://learn.javascript.ru/onscroll

Comments

[senator]

а почему я также еще одно событие сделал, для другого еще одного класса, но не работает

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

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

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

[senator]

А все само по себе заработало, хз что было. Как повезет

[senator]

А нет, проблема вот в чем, у меня несколько классов .header__link , и класс cactive добавляется только к одному а не ко всем как можно решить?

[senator]

querySelectorAll не помог также

[Сергей delphinpro]

georgi1984, querySelectorAll возвращает коллекцию элементов. Каждый из которых нужно обработать отдельно.