Как задать стили элементу, при скроле к нему вниз?

Question

[defreshy]

пример
Есть вот такой элемент:

Когда скролить вниз пункт меняет свой цвет:

Как можно такое реализовать?

Answer 1

[Александр]

Можно с помощью IntersectionObserver

window.onload = () => {
  const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              entry.target.className = 'Класс синего кружка';
              observer.unobserve(entry.target);
          }
      })
  }, { threshold: 0.5 })

  document.querySelectorAll('Класс серого крцжка').forEach(item => observer.observe(item));
}

Можно еще поиграться с параметрами, полное описание здесь: https://developer.mozilla.org/ru/docs/Web/API/Inte...