Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

Lekce 20 - Bootstrap - Scrollspy

HTML a CSS Bootstrap Bootstrap - Scrollspy

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Popovers, jsme si představili Popovers. Zbývají nám již jen poslední 2 Bootstrap komponenty. V dnešním tutoriálu tohoto CSS frameworku bude řeč o první z nich - Scrollspy.

Scrollspy

Skrolovací špión je komponenta, která umožňuje zobrazovat v jaké části stránky se nacházíme a to podle pozice našeho scrollbaru. Zobrazování naší pozice probíhá v komponentách Navigation nebo List Group.

Scrollspy potřebuje mít na scrollovacím elementu, nejčastěji na <body>, nastaveno position: relative. Pokud Scrollspy použijeme na kterémkoli jiném elementu, měl by mít samozřejmě nastavenou výšku a overflow-y: scroll, aby se na něm scrollbar zobrazil :) V navigaci používáme výhradně elementů <a>. Aktuální prvek bude v navigaci automaticky označen třídou .active, ale ten první musíme označit sami.

Ukázky

Scrollspy si ukážeme na různých komponentách.

Navbar

Jako první si komponentu předvedeme na navbaru:

<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, kterým chceme scrollovat, nejčastěji <body>, přidáme atribut data-spy="scroll" a data-target se selektorem navigace. Tím je scrollspy připravený. Aby propojení mezi navigací a obsahem fungovalo, musí odkazy vést na ID příslušných elementů obsahu, který chceme sledovat. Samozřejmě nesmíme zapomenout připojit i Bootstrap JavaScript. Navigaci držíme stále nahoře pomocí třídy .sticky-top.

Výsledek v prohlížeči:

Scrollspy v Bootstrap
scrollspy_navi­gace.html

Zkuste si posunout scrollbarem, navigace se bude přepínat podle toho v jaké části dokumentu se nacházíte. Scrollspy ignoruje neviditelné elementy.

Víceúrovňová navigace

Scrollspy dokáže zaktivnit i rodiče elementu v navigaci, pokud je víceúrovňová. Zkusme 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ázka:

Scrollspy v Bootstrap
scrollspy_vice­urovnovy.html

List group

Ukázky završíme vytvořením svislé navigace komponentou 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ázka:

Scrollspy v Bootstrap
scrollspy_lis­t_group.html

JavaScript

Komponentu opět můžeme ovládat z JavaScriptu.

Inicializace

Místo použití data atributu můžeme provést inicializaci voláním metody scrollspy():

$('body').scrollspy({ target: '#navbar-ukazka' });

Vlastnosti

Pomocí data atributu data-offset nebo JS vlastnosti offset můžeme nastavit odsazení od horního okraje obrazovky, od kterého se počítá pozice scrollbaru. Výchozí hodnota je 10. Obvykle vypadá lépe nastavit vyšší hodnotu, např. zde v ukázkách jsme použili 70, aby se nemuselo přijet až úplně k nadpisu, ale jen do jeho těsné blízkosti.

Metody

Metodě scrollspy() můžeme předat následující parametry:

  • "refresh" - Pokud používáme scrollspy a přidali jsme do stránky nějaký obsah nebo jsme jej odebrali, musíme scrollspy obnovit předáním právě tohoto parametru metodě scrollspy("refresh"). Kód pro obnovení všech scrollspy na stránce by vypadal takto:
$('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy("refresh");
})
  • "dispose" - Zničí scrollspy elementu.

Události

Můžeme reagovat na událost activate.bs.scrollspy, která se vyvolá ve chvíli, když scrollspy aktivuje položku navigace. Reakce na tuto událost by mohla vypadat např. takto:

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
        // nějaká reakce...
});

V příští lekci, Bootstrap - Tooltipy, dokončíme Bootstrap komponenty :) Řeč bude o tooltipech.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
1 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Popovers
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Tooltipy
Aktivity (2)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!