Aktivni anchor u navigaciji

[belmin]

Pozdrav.

Radim na jednom responzivnom one page templatu i imam jednu navigaciju.Tu cu koristiti locall scroll.Znaci kada se klikne na odredjeni anchor npr. Works odskrolati ce to #works diva.

Pitanje:
Kako preko Javascripta da napravim da kada se npr nalazim na #works da anchor Works (na navigaciji) dobije .active klasu

Nadam se da nisam bio previse konfuzan

[cronex]

Možeš naći njegove koordinate tj. koliko je taj element s tom klasom udaljen od vrha stranice. Kada to dobiješ, gledaš scroll offset i to ti je to.

[belmin]

Neki primjer, jer sam relativno los sa JS-om ?

[cronex]

1. za element - http://api.jquery.com/offset/
2. za scroll - http://api.jquery.com/scrollTop/
3. neki xy primjer -
   http://kylewbanks.com/blog/Detecting-Scroll-Events-And-Getting-Scroll-Offset-With-jQuery

Dao sam ti ovakve primjere a ne gotov kod jer će ti ovo dugoročno pomoći.

[belmin]

Hvala ti, ali kad sam mislio da sam los sa Javascriptom, mislio sam da sam ono bas los, totalno.

Trazio sam neko gotovo rijesnje ali nista nisam nasao.

[apazinjan]

Ako kojim slucajem koristis Bootstrap, on to vec ima integrirano (iako nisam nikada koristio): http://getbootstrap.com/javascript/#scrollspy

Takodjer imas ovo (takodjer nisam koristio): https://github.com/davist11/jQuery-One-Page-Nav

Iako je najbolje to sam napisati, uhvati se JavaScripta

[belmin]

To je to, hvala

Tek sam poceo da radim sa Bootstrapom, pa dosta toga ne znam.

U planu sam duze vrijeme da ucim Javascript, ali uvijek me neka druga stvar zezne,evo sad Bootstrap

[belmin]

@apazinjan kada sam vidio live demo mislio sam to je to, no kada sam pokusao nisam dobio sto sam htio.

Ovo Bootstrapovo rijesenje uopste nece da radi,uradim sve kao sto pise i nista.
Ovo sa GitHuba radi djelomicno.Dobijem samo smooth scroll animaciju i nista vise, tj. ne dobijem ono sto trazim.

[crazy_man]

Treba ti visina do prvog elementa, to je kod mene headerheight. box-section klasu postaviš za svaki h1 tag recimo, imaš ih 5 na sajtu i to su ti sekcije koje će biti označene aktivne kako skrolaš.

$(window).scroll(function(){
var windscroll = $(window).scrollTop();

var headerheight = $(’#header’).height();

if(windscroll > (headerheight + 15)) { // 15px - padding-top
$(’#content .box-section’).each(function(i) {
if ($(this).position().top <= windscroll - headerheight) {
$(‘ul#navig li a.active’).removeClass(‘active’);
$(‘ul#navig li a’).eq(i).addClass(‘active’);
}
});
}
else {
$(‘ul#navig li a.active’).removeClass(‘active’);
$(‘ul#navig li a:first’).addClass(‘active’);
}
});