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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Petr Nymsa

Tvůrce

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

Jakub Vaněk (Bubavanek)

Člen

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

Petr Nymsa

Tvůrce

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

Honza Bittner

Tvůrce

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.

Drahomír Hanák

Tvůrce

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.