Добавить класс к элементу в области просмотра ⇐ Jquery

[Anonymous]

У меня есть пять разделов на моей странице, и я пытаюсь добавить класс «активный» к разделу в окне просмотра.
Я попробовал этот код, но он не работает должным образом.
Код сохраняет все элементы с именем тега «раздел» в списке узлов, затем создал массив из этого списка, я перебрал массив и добавил прослушиватель событий для каждого элемента, затем я проверил, находится ли элемент в области просмотра, поэтому я добавляю класс, иначе удаляю класс.
Проблема когда страница прокручивается, все пять разделов будут иметь класс «активный», что означает, что несколько элементов имеют класс «активный» одновременно, хотя в порту просматривается только один раздел, и когда я продолжаю прокручивать вниз, разделы, которые перемещаются вверх из области просмотра, удаляют свой класс «активный».
Как я могу одновременно иметь один элемент с изображением кода класса «активный»?
//values of viewport
const viewWidth = document.documentElement.clientWidth;
const viewHeight = document.documentElement.clientHeight;

//set class active to section in viewport
function sectionInView(x) {
for (let i = 0; i in x; i++) {
document.addEventListener("scroll", function () {
let el = x.getBoundingClientRect();
if (el.top >= 0 && el.left >= 0 && el.bottom

Подробнее здесь: https://stackoverflow.com/questions/697 ... n-viewport