Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: One Page i aktywna sekcja
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Vertisan
Mam stronę typu one/single page, czyli wszystko na jednym.

Udało mi się zrobić płynne 'przejeżdżanie' do konkretnych kotwic, ale mam inny problem.

Otóż chciałbym, żeby aktualizowało się menu, np. tak jak tutaj: http://tobiashaeusler.de/

Tj. klikam na Kontakt, to przejedża mi do sekcji "kontakt" i w menu to Kontakt dostaje klasę "active".

Kod JS tego przewijania:
  1. function scroll_to(selector) {
  2. $('html,body').animate({scrollTop: $(selector).offset().top}, 1000);
  3. return false;
  4. }


i menu:
  1. <ul class="nav navbar-nav navbar-right">
  2. <li class="active"><a href="java script:void();" onclick="scroll_to('#home');">STRONA GŁÓWNA (obecna)</a></li>
  3. <li><a href="java script:void();" onclick="scroll_to('#o-mnie');">O MNIE</a></li>
  4. <li><a href="java script:void();" onclick="scroll_to('#portfolio');">PORTFOLIO</a></li>
  5. <li><a href="java script:void();" onclick="scroll_to('#kontakt');">KONTAKT</a></li>
  6. </ul>
kamilo818
Moj sposób

  1. var href = $(location).attr('hash');
  2. if(href==""){
  3. href="#home";
  4. }
  5. $('a').css('color','');
  6. $('a[href="'+href+'"]').css('color','#ffffff');
  7.  
  8. var $root = $('html, body');
  9. $('a').click(function() {
  10. var href = $.attr(this, 'href');
  11. $root.animate({
  12. scrollTop : $(href).offset().top
  13. }, 500, function() {
  14. window.location.hash = href;
  15. $('a').css('color','');
  16. $('a[href="'+href+'"]').css('color','#ffffff');
  17. });
  18.  
  19. return false;
  20. });
pedro84
Jeśli jQ to polecam zdecydowanie ten plugin: https://github.com/davist11/jQuery-One-Page-Nav.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.