Как можно добавить класс к нескольким элементам шапки одновременно при прокрутке?

Question

Генрих

javascript

Как можно добавить класс к нескольким элементам шапки одновременно при прокрутке?

Как можно настроить скрипт так, чтобы при прокрутке на 2 экран добавлялся класс active к нескольким элементам шапки с одинаковым классом, и удалялся при возвращении на 1 экран? Различные существующие подходы приводят к добавлению/удалению класса только у одного элемента. Ссылка на текущий код: https://codepen.io/daria-v1985/pen/rNRwrZq.

22 января 2024 г. 5:48

Ответы на вопрос 2

Похожие вопросы

Answer 1

Существует несколько способов добавить класс к нескольким элементам целевой шапки при прокрутке. В вашем случае, судя по предложенному коду на CodePen, вы хотите отслеживать прокрутку страницы и добавлять класс `active` к элементам, когда посетитель прокручивает до второго экрана.

Вот примерный JavaScript код, который решает эту задачу:

```javascript
// Получаем все элементы, которые нужно изменить
var headerElements = document.querySelectorAll('.your-header-element-class');

// Определяем функцию, которая добавляет или удаляет класс 'active'
function toggleActiveClass() {
  // Пороговое значение, например, высота окна браузера (один экран)
  var scrollThreshold = window.innerHeight;
  
  // Получаем текущую позицию прокрутки
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  
  // Если страница прокручена ниже порогового значения, добавляем класс 'active' 
  // к каждому элементу, в противном случае удаляем этот класс
  if (scrollPosition >= scrollThreshold) {
    headerElements.forEach(function(element) {
      element.classList.add('active');
    });
  } else {
    headerElements.forEach(function(element) {
      element.classList.remove('active');
    });
  }
}

// Добавляем событие прокрутки, которое вызывает функцию toggleActiveClass
window.addEventListener('scroll', toggleActiveClass);
```

Что было сделано в предложенном коде:

1. Селектор `querySelectorAll` используется для получения всех DOM элементов, которые должны изменяться при прокрутке.
2. Функция `toggleActiveClass` вызывается при каждом событии прокрутки (`scroll`).
3. Функция проверяет текущее положение прокрутки и, если она больше или равна величине высоты окна браузера (т.е. прокрутка достигла второго экрана), добавляет класс `active` ко всем соответствующим элементам. Если прокрутка меньше этого значения, то класс удаляется.

Убедитесь, что класс, по которому вы ищете элементы в `querySelectorAll`, существует в вашем HTML и называется так же, как и в JavaScript. Замените `.your-header-element-class` на реальное имя класса элементов в вашем HTML.

И наконец, проверьте, что ваша логика пороговых значений (`scrollThreshold`) соответствует желаемому моменту переключения класса. Вероятно, вам нужно будет настроить это значение, чтобы оно точно соответствовало вашему дизайну и ожиданиям.

Answer 2

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