Lekce 25 - Bootstrap - Scrollspy

V minulé lekci, Bootstrap - Popovers, jsme si představili Popovers. Zbývají už nám pouze dvě.

V dnešním tutoriálu tohoto CSS frameworku bude řeč o další Bootstrap komponentě - 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_navigace.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_viceurovnovy.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_list_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

Uživatelské hodnocení:

188 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity