Как присвоить стиль :active к ссылке при скроллинге к якорю/анкору?

Question

[ApacHee]

Никак не могу разобраться.
Есть анкор лист:

<li><a href="#block1" id="s1">Блок_1</a></li>
<li><a href="#block2" id="s2">Блок_2</a></li>
<li><a href="#block3" id="s2">Блок_3</a></li>

и, конечно же, сами анкоры:

<div class="s1"><h1 id="block1">Блок_1</h1>....</div>
<div class="s2"><h1 id="block2">Блок_2</h1>....</div>
<div class="s3"><h1 id="block3">Блок_3</h1>....</div>

Есть ли готовое решение, которое помогло бы мне реализовать присвоение стиля :active для определенной ссылки в меню, при перемещении (скроллинге) к определенному анкору?

Спасибо.

Answer 1

[Dron Krzh]

getbootstrap.com/javascript/#scrollspy
или
jsfiddle.net/mekwall/up4nu

Comments

[ApacHee]

Второй пример вроде бы понятен, но у меня локал хосте работать не хочет:(

Answer 2

[Слава]

Есть набор ссылок с якорями к соотв блокам.
При скролле пробегаетесь по набору блоков и смотрите, приблизительно такое условие

if(block.offset() < win.scrollTop() + win.height())
для каждого блока, верхняя граница которого находиться НАД нижней частью экрана будет true
Соотв вам надо выбрать самый нижний из них :)
Через блок выйти на ссылку и присвоить ей все что вам надо

Answer 3

[Петруша Укропов]

h1:target { 
background-color: #FFFCF8;
}

htmlbook.ru/css/target

Answer 4

[frees2]

Вообще бы отказался бы от этой хуеты, есть решения на html5 history, аналога даже более легкого, с адресом и историей перемещений, тут пейсал, где то быдлокод, где то у меня.