Есть лендинг, с фиксированым хэадером в которм есть вот такое меню
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
При нажатии на меню, нас скролит к артикл
<article id="home">
<h2>good ideas comes first</h2>
</article>
<article id="services">
<h2>our services</h2>
</article>
<article id="about">
<h2>who we are & what we do</h2>
</article>
<article id="work">
<h2>our work</h2>
</article>
<article id="contacts">
<h2>contact us</h2>
</article>
каждый такой артикл имеет свой цвет бэкграунда.
Как сдлеать так, когда юзера скролит к артиклу, чтоб цвет активной ссылки менялся на похожий(нужные цвета допустим записаны в классах)
т.е. На красном фоне, активное меню, красного оттенка, на зеленем - зеленого и т.д.
Пока что у меня только синего(
UPD: обяснение - Каждый артикл у нас например 100vh и если мы находимся в начале и у нас меню синее, при нажатии на последнее меню, у нас страничка прокручивается через все артиклы (красный, фиолетовый, зеленый) а менюшка меняется с синего на желтый.
Меню у нас дисплей: фиксед. Как можно сделать следующее: когда пункт меню hreff="#about", находится в секции id="about", оно становится тут же активным, и меняет цвет.
т.е. если у нас страничка скролится с 1 артикла к последнему, то все пункты меню, так же "меняют свою активность".
Простой