Как отследить прокрутку до секции на чистом js?

Question

[Serqwezxc]

Например есть такая разметка

<section class="1"></section>
<section class="2"></section>
<section class="3"></section>
<section class="4"></section>
<section class="5"></section>

Нужно отследить прокрутку страницы, до середины каждой секции и добавлять ей определенный класс, учитывая что на разных устройствах, высота страницы будет разная.

Answer 1

[Serqwezxc]

Решил вот таким способом

const getId = (link) => link.getAttribute('href').replace('#', '')

const observer = new IntersectionObserver(
   (entries) => {
      entries.forEach((entry) => {
         if (entry.isIntersecting) {
            document.querySelectorAll('.menu__link').forEach((link) => {
               link.classList.toggle('menu__link--active', getId(link) === entry.target.id)
            })
         }
      })
   },
   {
      threshold: 0.4,
   }
)
document.querySelectorAll('.section').forEach((section) => {
   observer.observe(section)
})

Comments

[Роман]

Слушай, а ловко ты это придумал, я даже сначала не понял. Молодец!