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

Чтобы при скролле шапки класс добавлялся к нескольким элементам сразу в JavaScript, вам понадобится использовать событие скролла и методы DOM для манипуляции элементами и их классами.

Вот пример кода, который позволит вам достичь этой цели:

// Функция, которая будет добавлять класс при скролле
function addClassOnScroll() {
    // Получаем ссылки на элементы, к которым будем добавлять класс
    var elements = document.querySelectorAll('.header-element');
    
    // Получаем текущую позицию прокрутки
    var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    
    // Проверяем, сколько пикселей нужно проскроллить, чтобы добавить класс
    var scrollThreshold = 100;
    
    // Перебираем все элементы и добавляем класс, если позиция прокрутки достаточна
    for (var i = 0; i < elements.length; i++) {
        if (scrollPosition > scrollThreshold) {
            elements[i].classList.add('scrolled');
        } else {
            elements[i].classList.remove('scrolled');
        }
    }
}

// Подписываемся на событие скролла и вызываем функцию, когда оно происходит
window.addEventListener('scroll', addClassOnScroll);

В этом примере мы используем функцию addClassOnScroll, которая проверяет текущую позицию прокрутки и добавляет класс "scrolled" ко всем элементам с классом "header-element", если позиция прокрутки больше определенного порога (100 пикселей в данном случае). Если позиция меньше порога, класс удаляется.

Затем мы подписываемся на событие скролла и вызываем функцию addClassOnScroll, когда пользователь прокручивает страницу.

Обратите внимание, что в этом примере используется querySelectorAll для выбора всех элементов с классом "header-element", но вы можете изменить этот селектор в соответствии с вашими потребностями.

Таким образом, при скролле шапки класс "scrolled" будет добавляться ко всем указанным элементам, позволяя вам стилизовать их или применять определенные стили только во время скролла.