IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Zvýrazňování aktuální položky menu

Aktivity
Avatar
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:6.10.2013 19:46

Patlám se opět s JS resp. s jQuery a potřeboval bych vyřešti zvýraznění aktuální položky v menu. Řeším to zatím tak, že si zjistím offset().top menu a řes podmínky zjišťuju kde je, např.

var menuTop = $("#menu").offset().top;

if(menutop >= $("#about").offset().top)
...

mírně jsem to zjednodušil. Ještě tam přepočítávám výšku menu.

Neexistuje nějaké elegantnější řešení než mít 3 podmínky a výpočty ? Díky za tip

Odpovědět
6.10.2013 19:46
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Jakub Vaněk (Bubavanek)
Člen
Avatar
Odpovídá na Petr Nymsa
Jakub Vaněk (Bubavanek):26.11.2013 22:06

Vim, ze je pozde, ale proc to neudelat klasicky pomoci css a html. Staci jeden class.

 
Nahoru Odpovědět
26.11.2013 22:06
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Jakub Vaněk (Bubavanek)
Petr Nymsa:26.11.2013 22:11

Jedná se o One-Page, tj když uživatel scrolluje, mění se podbarevní aktuální položky v menu, které odpovídá aktuálnímu obsahu, to se čistě pomocí CSS neudělá ;).

Nahoru Odpovědět
26.11.2013 22:11
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:26.11.2013 22:23

bylo mi řečeno že offset() je již zastaralé a místo něho se používá position() které dává 2 hodnoty, top a left... tzn. ty potřebuješ position().top

jako další musíš porovnávat scroll okna vůči pozici bloku odshora až pozici odshora + výška ...

celkový script může vypadat třeba takto :
(mám jednotlivé sekce v divu #main a v section)

$("#main section").each(function(){

  var a = $(window).scrollTop(); //kde se aktuálně nachází okno
  var b = $(this).position().top; //jakou má pozici odshora aktuální selection
  var vyskaMenu = $('nav').height(); //zjistí výšku mena
  var vyskaSection = $(this).height(); //zjistí výšku section

  if( ( (a + vyskaMenu + 15) > b ) && ( a < (b + vyskaSection) ) ) //přidáno 15px, jinak se ti bude přepínat přesně na hranu
  {
    $("nav ul li").removeClass('aktivni');
    // + nastavení třídy správnému li v menu
  }
});

takto nějak by to mohlo fungovat :)

Editováno 26.11.2013 22:25
Nahoru Odpovědět
26.11.2013 22:23
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Drahomír Hanák
Tvůrce
Avatar
Drahomír Hanák:26.11.2013 22:36

Pomož si data atributy:

var body = $('body');
$('[data-activate]').each(function() {
   var element = $(this);
   var targetLink = $(element.data('activate'));
   var scrollTop = body.scrollTop();
   if (element.offset().top > scrollTop) {
     targetLnk.addClass('active');
   } else {
      targetLnk.removeClass('active');
   }
});

// HTML
<h1 data-activate="#javascript">JavaScript</h1>

Nezkoušel jsem to, ale myšlenka je z toho doufám patrná.

 
Nahoru Odpovědět
26.11.2013 22:36
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.