Добавлять/убирать класс у элементов при скролле?

Question

[a9105051396]

Прошу не кидать камнями, только изучаю JS.

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

Есть JS код, который отмечает элемент активным, если до него доскоблили:

const section = document.querySelectorAll('section');
const paginationItem = document.querySelectorAll('.pagination__item');

function checkSection(elem, i) {
  let posElem = elem.getBoundingClientRect();

  if (posElem.top < 200) {
      paginationItem[i].classList.add('active');
    }
  }

  for (let i = 0; i < section.length; i++) {
    checkSection(section[i], i);
  }

  document.addEventListener('scroll', () => {
    for (let i = 0; i < section.length; i++) {
      checkSection(section[i], i);
    }
  });

1) Есть ощущение, что сделал все через одно место и можно оптимизировать, но не знаю как.
2) Как сделать, что бы бы элементы указывающие на предыдущие секции становились неактивными?

Answer 1

[Дмитрий Беляев]

Вопрос поднимался здесь уже много раз...

1. Оптимизировать можно с помощью IntersectionObserver
2. Просто убирайте класс со всех остальных элементов