Lekce 25 - Bootstrap - Scrollspy

V minulé lekci, Bootstrap - Popovery, jsme si představili popovery (Popovers).

V dnešním tutoriálu CSS frameworku Bootstrap bude řeč o další Bootstrap komponentě – Scrollspy. Tato komponenta umožňuje automaticky přepínat aktivní tlačítka na navigaci podle toho, kde se na stránce nacházíme.

Scrollspy v Bootstrapu

Scrollspy (česky bychom mohli říci scrollovací špion) 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 navigace 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 element samozřejmě nastavenou výšku a overflow-y: scroll, aby se na něm scrollbar zobrazil V navigaci používáme výhradně elementy <a>. Aktuální prvek bude v navigaci automaticky označen třídou .active.

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

Navbar

Nejprve si komponentu předvedeme na navbaru:

<body data-bs-spy="scroll" data-bs-target="#navbar-ukazka" data-bs-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" 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-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Další</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#fusce">Fusce erat eros</a></li>
                </ul>
            </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, tedy nejčastěji <body>, přidáme atribut data-bs-spy="scroll" a data-bs-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 také Bootstrap JavaScript. Navigaci držíme stále nahoře pomocí třídy .sticky-top.

Výsledek v prohlížeči:

Scrollspy v Bootstrapu

scrollspy_navigace.html

Zkusme si posunout scrollbarem, navigace se bude přepínat podle toho, v jaké části dokumentu se nacházíme. 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-bs-spy="scroll" data-bs-target="#navbar-ukazka" data-bs-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 ms-3 my-1" href="#aenean">Aenean a condimentum</a>
                        <a class="nav-link ms-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 ms-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 Bootstrapu

scrollspy_viceurovnovy.html

List group

Ukázky završíme vytvořením svislé navigace komponentou List group:

<body data-bs-spy="scroll" data-bs-target="#list-example" data-bs-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 Bootstrapu

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():

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Vlastnosti

Pomocí data atributu data-bs-offset nebo javascriptové vlastnosti offset můžeme nastavit odsazení od horního okraje obrazovky, od kterého se počítá pozice scrollbaru. Výchozí hodnota je 10. Výsledek obvykle vypadá lépe po nastavení pozice na vyšší hodnotu, např. v našich 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

Na jednotlivé metody se podíváme blíže:

refresh() – Pokud používáme Scrollspy a přidali jsme do stránky nějaký obsah nebo jsme jej odebrali, musíme refresh volat způsobem uvedeným níže. Kód pro obnovení všech Scrollspy na stránce by vypadal takto:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

dispose() – Zničí Scrollspy elementu.
getInstance() – Statická metoda, která nám umožní získat Scrollspy instanci spojenou s prvkem DOM.
getOrCreateInstance() – Statická metoda, která nám umožní získat Scrollspy instanci spojenou s prvkem DOM nebo vytvořit novou v případě, že nebyla instance inicializována.

Události

Událost activate.bs.scrollspy se vyvolá ve chvíli, když Scrollspy aktivuje položku navigace. Reakce na tuto událost vypadá například takto:

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
    // Nějaká reakce…
});

V příští lekci, Bootstrap - Tooltipy, si představíme tooltipy, jejich inicializace a ovládání JavaScriptem.

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

946 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 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

Nejčastěji vyhledáváné

Lekce 25 - Bootstrap - Scrollspy

Scrollspy v Bootstrapu

Navbar

Víceúrovňová navigace

List group

JavaScript

Inicializace

Vlastnosti

Metody

Události