Как добавить определенный класс к заголовку при прокрутке страницы до определенного блока?

Как сделать, чтобы стили применялись к шапке сайта на всех блоках с одинаковыми классами при прокрутке до них, а не только на последнем блоке, как происходит сейчас?
  • 2 мая 2024 г. 8:20
Ответы на вопрос 1
Для добавления определенного класса к заголовку при прокрутке страницы до определенного блока, вам нужно использовать JavaScript. Вот пример кода, который позволит это сделать:

```javascript
window.addEventListener('scroll', function() {
  var header = document.querySelector('header');
  var block = document.querySelector('#your-block-id'); // замените 'your-block-id' на id нужного вам блока

  if (window.scrollY > block.offsetTop) {
    header.classList.add('your-class'); // замените 'your-class' на класс, который вы хотите добавить к заголовку
  } else {
    header.classList.remove('your-class');
  }
});
```

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

```javascript
var blocks = document.querySelectorAll('.your-block-class'); // замените 'your-block-class' на класс блоков, до которых нужно применить стили
var header = document.querySelector('header');

blocks.forEach(function(block) {
  window.addEventListener('scroll', function() {
    if (window.scrollY > block.offsetTop) {
      header.classList.add('your-header-class'); // замените 'your-header-class' на класс, который вы хотите добавить к шапке
    } else {
      header.classList.remove('your-header-class');
    }
  });
});
```

Этот код будет следить за прокруткой страницы и добавлять или удалять класс у шапки сайта в зависимости от того, до какого блока вы прокрутили страницу.
Похожие вопросы