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

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

Вот шаги, которые вам нужно выполнить:

1. Получите ссылки на нужные вам элементы блоков, к которым вы хотите добавить класс при достижении. Это можно сделать, используя методы document.querySelector или document.querySelectorAll. Например, если у вас есть блок с классом "myBlock", вы можете получить ссылку на него следующим образом:

const block = document.querySelector('.myBlock');

2. Создайте функцию, которая будет проверять, достиг ли блок верхней части окна браузера. Для этого вы можете использовать метод .getBoundingClientRect(), который возвращает объект, содержащий координаты элемента относительно вьюпорта.

function isBlockVisible(block) {
   const rect = block.getBoundingClientRect();
   return (
      rect.top >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight)
   );
}

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

window.addEventListener('scroll', function() {
   if (isBlockVisible(block)) {
      block.classList.add('myClass');
   } else {
      block.classList.remove('myClass');
   }
});

4. Теперь у вас есть функция, которая будет добавлять класс "myClass" к блоку, когда он становится видимым при прокрутке страницы, и удалять его, когда он становится невидимым.

Обратите внимание, что в примере мы используем класс "myClass", но вы можете использовать любой другой класс, который вам нужен.

Таким образом, данная реализация позволяет вам добавить класс при достижении блока при прокрутке страницы в JavaScript.