Dekuju, mrknu na to.
//autoeditácia príspevku (06 Nov 2014, 9:34)
Tak bohuzel pouzit to nemuzu mam to delane trosku jinak, ale nasel jsem si neco podobneho.
Vykoumal jsem neco takoveho ale prida to active jen na ten prvni :-/ Tusite nekdo co by na tomhle kodu mohlo byt spatne.
Kód: Vybrať všetko
$(window).scroll(function(){
var window_top = $(window).scrollTop();
var cinnost = $('div#cinnost').offset().top;
var reference = $('div#reference').offset().top;
if (window_top > cinnost) {
$('#main_nav li.cinnost').addClass('active');
}
else if (window_top > reference) {
$('#main_nav li').removeClass('active');
$('#main_nav li.reference').addClass('active');
}
else {
$('#main_nav li').removeClass('active');
}
});
Cele to vypada takto:
Kód: Vybrať všetko
<div id="home" class="content">
<div class="container">
<div id="home_nav">
</div>
<div class="sixteen columns">
<div class="box">
<img src="/design/img/logo-buildeko.png" alt="" />
<p class="perex">Lorem ipsum dolor sit amet, ad nostrud molestiae libera. Id omittam accumsan affert eripuit quaerendum dolorum detracto patrioque ei qui.</p>
</div>
</div>
</div>
<a id="arrow_down" href="#cinnost"><img src="/design/img/arrow-down.png" alt="" /></a>
</div>
<div id="cinnost" class="content">
<div id="main_nav_container">
<ul id="main_nav">
<li class="home"><a href="#home">Úvod</a></li>
<li class="cinnost"><a href="#cinnost">Předmět činnosti</a></li>
<li class="reference"><a href="#reference">Reference</a></li>
<li class="certifikaty"><a href="#certifikaty">Certifikáty</a></li>
<li class="podilime"><a href="#podilime">Podílíme se</a></li>
<li class="aktualne"><a href="#aktualne">Aktuálně</a></li>
<li class="kontakt"><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
<div class="container">
<div class="sixteen columns">
<div class="text_box">
<h2>Technologické provozní soubory staveb</h2>
<p>vzuchotechnika, rozvody tepla a chladu, rozvody plynů, měření a regulace</p>
<h2>Projekční činnost</h2>
<p>zajištění</p>
<h2>Stavební činnost</h2>
<p>drobná výstavba, arch. návrhy</p>
<h2>Servis</h2>
</div>
</div>
</div>
</div>
<div id="reference" class="content">
<p>Lorem ipsum dolor sit amet, in sed putent viderer inermis, ex mei laudem copiosae. Ne semper interpretaris mea. An vis purto nostrud, te unum veniam commodo has, affert tincidunt at duo. Eu errem delicata comprehensam vis. Ipsum tractatos ex eum, pro in tantas tamquam copiosae.
Ex homero vocibus expetenda mel, quo aeterno delicatissimi an, sed id nostrud recteque. Utamur phaedrum at nec, legere maiestatis ea pro. At eum nemore vivendo suavitate. Eu quo minimum assentior, his atqui accommodare ex, ad iudico veritus eos. Mea te vituperata percipitur.
</p>
</div>
<div id="certifikaty" class="content">
<p>Lorem ipsum dolor sit amet, in sed putent viderer inermis, ex mei laudem copiosae. Ne semper interpretaris mea. An vis purto nostrud, te unum veniam commodo has, affert tincidunt at duo. Eu errem delicata comprehensam vis. Ipsum tractatos ex eum, pro in tantas tamquam copiosae.
Ex homero vocibus expetenda mel, quo aeterno delicatissimi an, sed id nostrud recteque. Utamur phaedrum at nec, legere maiestatis ea pro. At eum nemore vivendo suavitate. Eu quo minimum assentior, his atqui accommodare ex, ad iudico veritus eos. Mea te vituperata percipitur.
</p>
</div>
<div id="podilime" class="content">
<p>Lorem ipsum dolor sit amet, in sed putent viderer inermis, ex mei laudem copiosae. Ne semper interpretaris mea. An vis purto nostrud, te unum veniam commodo has, affert tincidunt at duo. Eu errem delicata comprehensam vis. Ipsum tractatos ex eum, pro in tantas tamquam copiosae.
Ex homero vocibus expetenda mel, quo aeterno delicatissimi an, sed id nostrud recteque. Utamur phaedrum at nec, legere maiestatis ea pro. At eum nemore vivendo suavitate. Eu quo minimum assentior, his atqui accommodare ex, ad iudico veritus eos. Mea te vituperata percipitur.
</p>
</div>
<div id="aktualne" class="content">
<p>Lorem ipsum dolor sit amet, in sed putent viderer inermis, ex mei laudem copiosae. Ne semper interpretaris mea. An vis purto nostrud, te unum veniam commodo has, affert tincidunt at duo. Eu errem delicata comprehensam vis. Ipsum tractatos ex eum, pro in tantas tamquam copiosae.
Ex homero vocibus expetenda mel, quo aeterno delicatissimi an, sed id nostrud recteque. Utamur phaedrum at nec, legere maiestatis ea pro. At eum nemore vivendo suavitate. Eu quo minimum assentior, his atqui accommodare ex, ad iudico veritus eos. Mea te vituperata percipitur.
</p>
</div>
<div id="kontakt" class="content">
<p>Lorem ipsum dolor sit amet, in sed putent viderer inermis, ex mei laudem copiosae. Ne semper interpretaris mea. An vis purto nostrud, te unum veniam commodo has, affert tincidunt at duo. Eu errem delicata comprehensam vis. Ipsum tractatos ex eum, pro in tantas tamquam copiosae.
Ex homero vocibus expetenda mel, quo aeterno delicatissimi an, sed id nostrud recteque. Utamur phaedrum at nec, legere maiestatis ea pro. At eum nemore vivendo suavitate. Eu quo minimum assentior, his atqui accommodare ex, ad iudico veritus eos. Mea te vituperata percipitur.
</p>
</div>
