Как сделать такую проверку скролла на React?

Question

[DeniSidorenko]

Добрый день, на сайте идут секции друг под другом
К примеру как на картинке( их больше 3 )


Пользователь скроллит, доходит до начало 1 секции И когда секция полностью заходит в экран( т.е верхний угол секции находится на верху экрана) добавляется класс к примеру active ( для самой секции ) И так по аналогии со 2 секции

Я предоставляю себе реализацию таким образом. Проходимся по всем секциями и записываем их координаты. А когда пользователь скроллит добавляем проверку если к примеру scroll > элемента из массива , секции с данным индексом добавить класс. Правда саму реализации в коде не предоставляю. Спасибо заранее

Answer 1

[DeniSidorenko]

Получилось сделать примерно так, только вопрос, не будет ли это слишком нагружено ?

useEffect(() => {
    window.addEventListener('scroll', function (event){
      setScroll(window.scrollY > bannerPosition);
      if (window.scrollY < positions[0]) return;
      const index = positions.findIndex((el, i, arr) => window.scrollY < arr[i + 1]);

      const categoryAttribute = "[data-id=" + "'" + index + "'" + "]";
      const element = document.querySelector(categoryAttribute)

      const allElements = document.querySelectorAll('.menu-nav li span')
      for(let el of allElements){
        el.classList.remove('active')
      }

      if(element) element.classList.add('active')
      if(index === -1 && window.scrollY > positions[0]){
        allElements[allElements.length - 1].classList.add('active')
      }
    })

  },[bannerPosition, positions])