Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

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
Odpovídá na Petr Nymsa
Jakub Vaněk (Bubavanek):

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
Redaktor
Avatar
Odpovídá na Jakub Vaněk (Bubavanek)
Petr Nymsa:

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
Redaktor
Avatar
Odpovídá na Petr Nymsa
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Drahomír Hanák:

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.