Как реализовать подсветку активных пунктов меню на посадочной странице?

Question

[Дмитрий]

Добрый день!

Есть меню:

<div class="nav">
	<ul>
		<li><a href="index.html" class="active">Home</a></li>
		<li><a href="#service">Service</a></li>
		<li><a href="#portfolio">Portfolio</a></li>
		<li><a href="#team">Team</a></li>
		<li><a href="#tarifs">Tarifs</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
</div>

Есть стили для него:

.nav{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
	background: #fff url("../images/logo.png") no-repeat 8.313em 1.938em;
	line-height: 6.25em;
}
.nav ul{
	margin-left: 51%;
}
.nav ul li{
	display: inline-block;
	margin-right: 0.625em;
}
.nav ul li a{
	display: block;
	text-decoration: none;
	color: #484c55;
	padding: 0 1.25em;
}
.nav ul li a:hover,
.nav ul li a:focus,
.nav ul li a.active{
	background: #f8f9fb;
	color: #90dbdd;
	borde

Как сделать так, чтобы класс active переходил от пункта к пункту при прокрутке страницы и переходе по ссылкам?

С JS я не знаком пока что. Нашел в интернете такое решение, но у меня не работает.

Answer 1

[Виталий Инчин ☢]

Во! Мучался с телефона, но сделал, т.к самому интересно было :)

Comments

[Дмитрий]

Либо это немного не то, что мне нужно, либо мой мозг окончательно поник. Вот такой сайт dmitribogachev.pe.hu/landing и вот сверху ссылки, которые должны подсвечиваться

[Виталий Инчин ☢]

Дмитрий: в вашем случае, h1 - это блоки Сервис, портфолио и т.п, задайте им всем класс scroll и уникальные айди, замените в моем коде h1 на .scroll .
Дальше назначте каждому пункту меню атрибут data-id, такой же, как айди у блока, к которому этот пункт относится.

[jlekapb]

Дмитрий: в твоем примере сами пункты не меняются при скроле, там обычные якоря вместо ссылок.

[Дмитрий]

Виталий Инчин: спасибо большое!

Answer 2

[Александр]

ну так развивай данное решение) jquery подключен к странице?

Comments

[Дмитрий]

Подключен) Знал бы я как работать с JS и jquery, развил бы. Потыкался в функциях и в итоге ничего.

Answer 3

[ТыжСисАдмин]

Как задать класс для определенных страниц?