Как менять цвет меню, в зависимости от блоков на которых нахожусь?

Question

[fgehte]

Есть приклеенная менюшка, которая должна менять цвет в зависимости от того на каком блоке она находиться.
У блоков прописан атрибут data-theme="dark", если темный фон у блока и "light" если светлый.
Т.е. если меню налезла на блок, то у нее заменяется класс, как только вышла из блока, так класс опять меняется.
У самого получилось реализовать код только если такой блок один на странице, а как решить если их 2 и более?
Вот скрипт, в котором смог реализовать задачу только для одной секции.

const header = document.querySelector('.header')
    const themes = document.querySelectorAll('[data-theme]');

    function change() {
      themes.forEach(it => {
        if (this.scrollY >= themes[0].offsetTop - header.offsetHeight / 3 && this.scrollY <= themes[0].offsetHeight + header.offsetHeight) {
          header.classList.add('white')
          header.classList.remove('black')
        } else {
          header.classList.remove('white')
          header.classList.add('black')
        }
      })
    }
    window.addEventListener('scroll', change);

Comments

[Вадим]

ну, кажется, ответ лежит на поверхности. Нужно наблюдать не за одним элементом themes[0] а за всеми?

Так же Вам может помочь Intersection Observer