@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);
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $