25. diel - Bootstrap - Scrollspy
V minulej lekcii, Bootstrap - Popovers , sme si predstavili Popovers. Zostávajú nám už len posledný 2 Bootstrap komponenty. V dnešnom tutoriále tohto CSS frameworku bude reč o prvý z nich - Scrollspy.
Scrollspy
Skrolovacie špión je komponenta, ktorá umožňuje zobrazovať v akej časti stránky sa nachádzame a to podľa pozície nášho scrollbaru. Zobrazovanie našej pozície prebieha v komponentoch Navigation alebo List Group.
Scrollspy potrebuje mať na scrollovacím elementu, najčastejšie na
<body>, nastavené position: relative. Ak
Scrollspy použijeme na ktoromkoľvek inom elementu, mal by mať samozrejme
nastavenú výšku a overflow-y: scroll, aby sa na ňom scrollbar
zobrazil 
V navigácii
používame výhradne elementov <a>. Aktuálny prvok bude v
navigácii automaticky označený triedou .active, ale ten prvý
musíme označiť sami.
Ukážky
Scrollspy si ukážeme na rôznych komponentoch.
Navbar
Ako prvý si komponent predvedieme na Navbar:
<body data-spy="scroll" data-target="#navbar-ukazka" data-offset="70" style="position: relative"> <nav id="navbar-ukazka" class="navbar navbar-light bg-light sticky-top"> <a class="navbar-brand" href="#">Navigace</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#lorem">Lorem ipsum</a> </li> <li class="nav-item"> <a class="nav-link" href="#duis">Duis semper</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Další</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#fusce">Fusce erat eros</a> </div> </li> </ul> </nav> <div> <h4 id="lorem">Lorem ipsum</h4> <p>...</p> <h4 id="duis">Duis semper</h4> <p>...</p> <h4 id="fusce">Fusce erat eros</h4> <p>...</p> </div> </body>
Elementu, ktorým chceme scrollovať, najčastejšie
<body>, pridáme atribút data-spy="scroll" a
data-target s voličom navigácie. Tým je scrollspy pripravený.
Aby prepojenie medzi navigáciou a obsahom fungovalo, musí odkazy viesť na ID
príslušných elementov obsahu, ktorý chceme sledovať. Samozrejme nesmieme
zabudnúť pripojiť aj Bootstrap JavaScript. Navigáciu držíme stále hore
pomocou triedy .sticky-top.
Výsledok v prehliadači:
Skúste si posunúť scrollbar, navigácia sa bude prepínať podľa toho v akej časti dokumentu sa nachádzate. Scrollspy ignoruje neviditeľné elementy.
Viacúrovňová navigácia
Scrollspy dokáže ho vydať aj rodičia elementu v navigácii, ak je viacúrovňová. Skúsme si to:
<body data-spy="scroll" data-target="#navbar-ukazka" data-offset="70" style="position: relative"> <div class="row"> <div class="col-4"> <nav id="navbar-ukazka" class="navbar navbar-light bg-light sticky-top"> <a class="navbar-brand" href="#">Navigace</a> <nav class="nav nav-pills flex-column"> <a class="nav-link active" href="#lorem">Lorem ipsum</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#aenean">Aenean a condimentum</a> <a class="nav-link ml-3 my-1" href="#vivamus">Vivamus</a> </nav> <a class="nav-link" href="#duis">Duis semper</a> <a class="nav-link" href="#fusce">Fusce erat eros</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#mauris">Mauris tempor</a> </nav> </nav> </nav> </div> <div class="col-8"> <h4 id="lorem">Lorem ipsum</h4> <p>...</p> <h5 id="aenean">Aenean a condimentum</h5> <p>...</p> <h5 id="vivamus">Vivamus</h5> <p>...</p> <h4 id="duis">Duis semper</h4> <p>...</p> <h4 id="fusce">Fusce erat eros</h4> <p>...</p> <h5 id="mauris">Mauris tempor</h5> <p>...</p> </div> </div> </body>
A živá ukážka:
List group
Ukážky zavŕšime vytvorením zvislej navigácie komponentom List Group.
<body data-spy="scroll" data-target="#list-example" data-offset="70" class="scrollspy-example" style="position: relative"> <div class="row"> <div class="col-4"> <div id="list-example" class="list-group sticky-top"> <a class="list-group-item list-group-item-action active" href="#lorem">Lorem ipsum</a> <a class="list-group-item list-group-item-action" href="#duis">Duis semper</a> <a class="list-group-item list-group-item-action" href="#fusce">Fusce erat eros</a> </div> </div> <div class="col-8"> <h4 id="lorem">Lorem ipsum</h4> <p>...</p> <h4 id="duis">Duis semper</h4> <p>...</p> <h4 id="fusce">Fusce erat eros</h4> <p>...</p> </div> </div> </body>
Živá ukážka:
Javascript
Komponent opäť môžeme ovládať z JavaScriptu.
Inicializácia
Namiesto použitia dáta atribútu môžeme vykonať inicializáciu volaním
metódy scrollspy():
$('body').scrollspy({ target: '#navbar-ukazka' });
Vlastnosti
Pomocou dáta atribútu data-offset alebo JS vlastnosti
offset môžeme nastaviť odsadenie od horného okraja obrazovky,
od ktorého sa počíta pozície scrollbaru. Predvolená hodnota je
10. Zvyčajne vyzerá lepšie nastaviť vyššiu hodnotu, napr. Tu
v ukážkach sme použili 70, aby sa nemuselo prísť až úplne k
nadpisu, ale len do jeho tesnej blízkosti.
Metódy
Metóde scrollspy() môžeme odovzdať nasledujúce
parametre:
"refresh"- Ak používame scrollspy a pridali sme do stránky nejaký obsah alebo sme ho odobrali, musíme scrollspy obnoviť odovzdaním práve tohto parametra metódescrollspy("refresh"). Kód pre obnovenie všetkých scrollspy na stránke by vyzeral takto:
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy("refresh"); })
"dispose" -
Zničí scrollspy elementu. Udalosti
Môžeme reagovať na udalosť activate.bs.scrollspy, ktorá sa
vyvolá vo chvíli, keď scrollspy aktivuje položku navigácie. Reakcia na
túto udalosť by mohla vyzerať napr. Nasledovne:
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { // nějaká reakce... });
V budúcej lekcii, Bootstrap - tooltip , dokončíme Bootstrap komponenty Reč bude o tooltip.
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.