Добавление определенного класса к header при прокрутке до определенного блока?

Question

[Keany]

Добрый день!
Есть несколько блоков с одинаковыми классами. При прокрутки до которых, к шапке сайта применяются определенные стили, а после прокрутки удаляются. Перебираю циклом все элементы, но почему -то срабатывает только на последнем блоке. Как это можно исправить?

document.addEventListener('DOMContentLoaded', () => {
 
    const targetBlock = document.querySelectorAll('.gradient');
    console.log(targetBlock)
    const header = document.getElementById('header');

   const changeHeaderColor = () => {
        targetBlock.forEach((item, i) => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const targetOffset = item.offsetTop;
            const headerHeight = header.offsetHeight;

            if (item.getBoundingClientRect().bottom <= 0) {
                header.classList.remove('dark');
            } else if (scrollTop >= targetOffset - headerHeight) {
                header.classList.add('dark');
            } else {
                header.classList.remove('dark');
            }
        })
    }

    window.addEventListener('scroll', changeHeaderColor);
});

Comments

[Михаил Р.]

При прокрутки до которых, к шапке сайта применяются определенные стили, а после прокрутки удаляются. Перебираю циклом все элементы, но почему -то срабатывает только на последнем блоке

Почему не используйте IntersectionObserver?

[Keany]

Михаил Р., Не работал с эти API

[Михаил Р.]

Keany, рекомендую IntersectionObserver, производительность будет выше, а писанины меньше