Lekce 25 - Bootstrap - Scrollspy

V minulé lekci, Bootstrap - Popovers, jsme si představili 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

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.

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

Navbar

Jako první 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, 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 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

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 Bootstrap

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

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

Vlastnosti

Pomocí data atributu data-bs-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

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 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í:

504 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