Как отловить событие IntersectionObserver?

структура HTML
<div>Верхнее меню</div>
  <header>Заголовок sticky всегда висит наверху</header>
  <div class="items">
      <div class="item">Item 1</div>
     <div class="item">Item 2</div>
    <div class="item">Item 2</div>
  </div>


Задача при скроле блока items когда Item N доходит до шапки он постепенно менял прозрачность и уходил на нет, и так же обратно при скроле в обратную сторону.

const Observer = new IntersectionObserver((entries) => {

        entries.forEach(entry => {
            entry.target.classList.toggle('is-active', entry.isIntersecting);
        });

    }, {
        rootMargin: '0px 0px -90% 0px',
        threshold: 0
    });

    document.querySelectorAll('.item').forEach(element => {
        Observer.observe(element);
    });
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы