Есть приклеенная менюшка, которая должна менять цвет в зависимости от того на каком блоке она находиться.
У блоков прописан атрибут 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);
