Как можно написаит логику смены класса у хедера (цвета и фона) в зависимости от класса секции (фона) в которой находимся(высота 100vh min)?

Question

[elenikus]

Ребята, никак не пойму как правильно прописать логику :(

у меня есть фиксированный хедер и секции с минимальной высотой в 100vh. У секций фон или светлый или темный.
При скроле, когда светлая секция у хедера должен быть класс для светлого хедера, как только дойдем до темной секции и всю ее высоту - хедер меняет свой фон и цвет в соответсвии с новым классом.

У меня получилось сделать для первых классов, но как это правильно сделать в цикле - не понимаю :( буду рада любой подсказке. ссылка на кодпен codepen
Заранее спасибо

Comments

[boga-net]

а где ссылка на codepen ?

[elenikus]

boga-net, уже исправила :)

Answer 1

[Виктор]

https://jsfiddle.net/9z1v3m7y/

Comments

[elenikus]

Большое спасибо за идею!) а с момощью классов реально как-то аналогично сделать? если у меня 5 страниц и в каждой секции чередуются (всего два класса универсальных .dark-section .light-section)? просто для 20 секций писать id как-то не очень ..