Как сделать, чтобы при скролле шапки класс добавлялся к нескольким элементам сразу?

Question

[Дарья]

Здравствуйте.
Не могу сделать так, чтобы к нескольким элементам шапки с одинаковым классом добавлялся класс active после скролла на 2 экран. А также удалялся при возвращении на 1 экран.
Пробовала разные способы, но класс добавляется/удаляется только у одного элемента и все.

Код результата:


Подскажите, пожалуйста, что не так...

Comments

[itetomagia]

Если хочешь добавить класс active ко всем ссылкам в меню, то поменяй:
const menu = document.querySelector('.menu-block__link');

На:
const menu = document.querySelectorAll('.menu-block__link');

И:
menu.classList.add(activeClass);

На:
for(let i = 0; i < menu.length; i++ ){
menu[i].classList.add(activeClass);
}

Answer 1

[fokit]

querySelectorAll

а вообще если все элемент вложенны в header, то нет необходимости задавать им активный класс.
.header.active .нужны селектор {}

Comments

[Дарья]

Такой вариант выдает ошибку TypeError: menu.classList is undefined. Так как querySelectorAll применяется только к родительскому элементу.
При применении стилей в классе _scroll меняются стили самой шапки. А мне нужно только на ссылки воздействовать.

[Дарья]

а вообще если все элемент вложенны в header, то нет необходимости задавать им активный класс.

Изначально у меня уже заданы стили у меню. Необходимо их переопределить после того, как оно проскроллится вниз на 2 экран и вернуть при скролле вверх

[fokit]

Дарья,

Такой вариант выдает ошибку TypeError: menu.classList is undefined

потому что нужно немного внимательнее прочитать доку и понять, что querySelectorAll возращает NodeList и переписать код примерно так:

const menuLinks = document.querySelectorAll('.menu-block__link');
menuLinks.forEach((link) => {
 // ...
})

Изначально у меня уже заданы стили у меню. Необходимо их переопределить после того, как оно проскроллится вниз на 2 экран и вернуть при скролле вверх.

Нет необходимости получать все пункты меню и бегать по ним циклом. Достаточно задать родительскому контейнеру класс в нужный момент и переопределить с помощью него стили ссылок

[Дарья]

fokit,

Не могли бы вы привести пример такого переопределения, а то я не могу понять с какой стороны подступиться...
Заранее спасибо!