Sticky menu a sidebar v jQuery
Ďalšia veľa používaná vec na stránkach je sticky menu či sidebar. Čo to vlastne je? Je to potrebné to menu alebo sidebar, ktoré sa po prekročení určitej hranice scrollTop -u okná prilepí, tzn. je fixná, na stránku. Sú to pomerne jednoduché kódy, ale vídam aj hrôzy, ktoré sa bežne používajú, povieme si teda čoho sa vyvarovať.
Takto bude vyzerať naša stránka:
Vidíme, že budeme mať najskôr nejaký iný obsah nad menu, najčastejšie nejaká hlavička s nadpisom. Vpravo pod menu tiež vidíme náš sidebar. Namiesto BTW môžeme použiť pokojne aj nejaké menu, ktoré však nesmú byť dlhšie ako výška stránky, pretože by sme nikdy nemohli zobraziť všetky položky.
Začneme zasa pridaním JS
$(function(){ ... kód ... });
a HTML
<body> <header> ... text ... </header> <div id="menu"> <nav> <ul> <li><a href="#alfa" class="tlacitko"><span>ALFA</span></a></li> <li><a href="#beta" class="tlacitko"><span>BETA</span></a></li> <li><a href="#gama" class="tlacitko"><span>GAMA</span></a></li> </ul> </nav> </div> <div id="main"> <section> <article id="alfa"> ... dlouhý text ... </article> <article id="beta"> ... dlouhý text ... </article> <article id="gama" class="last"> ... dlouhý text ... </article> </section> <aside> <div class="sticky"> <p> ... text ... </p> <p> ... text ... </p> </div> </aside> </div> <footer> ... text ... </footer> </body>
Menu
Teraz začneme teda s menu. Najskôr si premyslíme ako to urobíme. Samozrejme nás asi všetky napadne, že musíme porovnávať súradnice menu s scrollTop-om okna. Nesmieme však zabudnúť, že scrollTop musíme pri scrollovanie vždy nastaviť na novú hodnotu. Pokiaľ bude scrollTop väčší, menu nastavíme na fixné, ak menšie, nastavíme ho na relatívne.
No áno, ale keby sme to takto nakódovali, zistili by sme, že nám stránka vždy divne šklbne. Je to spôsobené tým, keď zmeníte nastavenie pozíciu menu, tak nám menu zo stránky akoby zmizne. To nám samozrejme zmenší stránku o výšku menu. Toho sa vyvarujeme tak, že sme pridali ešte jeden element, pomenoval som ho div # menu, ktorý nám bude uchovávať rozmery menu.
Dobre, ideme na kód. Najskôr si zase vytvoríme funkciu a do nej dáme pár premenných.
function fixMenu() { var menu_place = $('#menu').offset().top; var menu = $('nav');
Premennú menu_place nám bude rovno vracať pozíciu menu. Tu už máme všetko hotové, poďme teda pridať event na scrollovanie okna. Rovno si vytvoríme aj anonymný funkciu, v ktorej bude prebiehať zvyšok nášho kódu.
$(window).scroll(function(){ ... });
Najskôr, ako som sa už zmienil, vytvoríme premennú, ktorá bude obsahovať hodnotu scrollTop-u. Tá musí byť v tejto funkcii, aby sa nám jej hodnota menila.
var scroll_top = $(window).scrollTop();
Teraz už máme všetko čo budeme potrebovať pre podmienku. Zopakujem, že musíme porovnať, či je scroll_top väčší ako menu_place.
if ( scroll_top > menu_place )
Ak áno, nastavíme menu fixné pozíciu a top na nulu. Ak nie, pozíciu nastavíme relatívna.
if ( scroll_top > menu_place ) { menu.css({ 'position': 'fixed', 'top': 0 }); } else { menu.css({ 'position': 'relative' }); }
A je to hotové. Je to naozaj jednoduché.
Pre ukážku tu je obrázok, ako to vyzerá pri scroll. Vidíme teda, že všetko funguje.
Sidebar
Sidebar sa robí vlastne celkom podobne.
Najprv si povedzme, ako by sa to dalo urobiť, ale ako je to rozhodne nevýhodné či zdĺhavé:
- Mohli by sme si dať aside priamo do body, nastavili na absolute, a počítali zložito jeho pozíciu - left a top. Tu je tá nevýhoda, že keď budeme chcieť zmeniť stránku, pridať ešte jeden box, alebo niečo iné, výpočet nám nemusí počítať správne a môže sa niečo prekrývať.
- Odsadzovať aside pomocou margin-topu alebo topu. Keď to urobíte zle, pri scroll sa to bude akoby kosiť, to sa dá vyriešiť použitím .animate (). Tu chcem povedať, že sa to niekedy môže hodiť, ak sa dobre napíše kód. Keďže sa tu dá urobiť animácie posunu, tú ste už určite na nejakých weboch videli. Scrollujete a za chvíľu vám vždy "príde" reklama, tzn. neroluje stále s vami.
V podstate si urobíte výpočet scrollTop - aside.parent (). Offset (). Top a to dosadíte do top. Aside sa musí dať samozrejme na relatívnu pozíciu. Rozhodne si to odporúčam vyskúšať.
Ako by som to urobil najlepšie, ak chcem, aby so mnou sidebar stále scrolloval? Najskôr pridáme do aside jeden element, treba div, ktorý bude mať triedu .sticky. Do tohto divu už dáme rôzne paragrafy, obrázky, reklamy, či podobne. Je to kvôli tomu, keďže nám aside určuje smer v #main - float. Ak by sme dali .sticky na aside, presunie sa nám to doľava - vyrušia sa nám float. Tiež je ešte dobré dáš Asid nejaký padding, my použijeme padding: 50px 0;, Aby to nebolo všetko tak na zadok na menu.
Ako prvý si teda zase vytvoríme premenné, menu a sticky. Menu tu potrebujeme preto, lebo máme fixné menu, ktoré by nám sidebar zakrývalo. Sticky zase kvôli označenie toho, čo sa má fixnout.
Vytvoríme si teda funkciu, do ktorej vytvoríme aj premenné:
function fixAside() { var menu = $('nav'); var sticky = $('.sticky').offset().top;
Hneď pod týmto už budeme mať podmienku. Tá bude rovnaká ako u menu, porovnáme či ak je hodnota scrollTop väčšia ako pozícia Asid.
if ( scroll_top > sticky )
Keď áno, nastavíme fixné pozíciu a ako top nastavíme výšku menu, to je kvôli tomu prekrývanie.
{ $('.sticky').css({ 'position': 'fixed', top: menu.height() }); } else { $('.sticky').css('position','static'); }
No a to bude všetko. Celkový JS kód si môžete stiahnuť v prílohe.
Musíte si dávať ale u oboch častí - menu i BTW - "pozor", pretože je to napísané tak, že to počíta iba s jedným prvkom na stránke. Ak chcem mať 2 rôzne menu - prvý polku jedno, druhú polovicu druhej - musí sa to mierne upraviť. Podobne tak iu BTW. Ak by ste mali záujem aj o rozšírenie tohto tutoriálu, napíšte do komentárov, alebo sa prípadne pýtajte.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 1035x (8.71 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
