Как сделать смену цвета меню при прокрутке к article?

Есть лендинг, с фиксированым хэадером в которм есть вот такое меню
<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>


каждый такой артикл имеет свой цвет бэкграунда.
Как сдлеать так, когда юзера скролит к артиклу, чтоб цвет активной ссылки менялся на похожий(нужные цвета допустим записаны в классах)
т.е. На красном фоне, активное меню, красного оттенка, на зеленем - зеленого и т.д.

Пока что у меня только синего(
308874b3c5be450f96a71bf10a405656.png
0216112ae8af485988649ca51ee2e3ab.PNG
876ef6c7b77a49d0adac2d25f5dc540e.PNG

UPD: обяснение - Каждый артикл у нас например 100vh и если мы находимся в начале и у нас меню синее, при нажатии на последнее меню, у нас страничка прокручивается через все артиклы (красный, фиолетовый, зеленый) а менюшка меняется с синего на желтый.
Меню у нас дисплей: фиксед. Как можно сделать следующее: когда пункт меню hreff="#about", находится в секции id="about", оно становится тут же активным, и меняет цвет.
т.е. если у нас страничка скролится с 1 артикла к последнему, то все пункты меню, так же "меняют свою активность".
  • Вопрос задан
  • 1605 просмотров
Решения вопроса 1
Elwen
@Elwen
Присвойте каждой ссылке свои стили при активности. Для плавной смены цвета используйте transition, у которого время анимации равно времени прокрутки страницы.
https://jsfiddle.net/dbxpvhfp/

Или применяйте к каждой ссылке по клику класс с нужными стилями.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы