Чтобы добавить класс при достижении определенного блока в 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.