25. diel - Bootstrap - Scrollspy

V minulej lekcii, Bootstrap - Popovers , sme si predstavili Popovers.

V dnešnom tutoriále CSS frameworku Bootstrap bude reč o ďalšej Bootstrap komponente - Scrollspy. Tento komponent umožňuje automaticky prepínať aktívne tlačidlá na navigáciu podľa toho, kde sa na stránke nachádzame.

Scrollspy v Bootstrape

Skrolovací špión je komponent, 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 scrollovacom elemente, najčastejšie na <body>, nastavené position: relative. Pokiaľ Scrollspy použijeme na ktoromkoľvek inom elemente, mal by mať samozrejme nastavenú výšku a overflow-y: scroll, aby sa na ňom scrollbar zobrazil:) V navigácii používame výhradne elementy <a>. Aktuálny prvok bude v navigácii automaticky označený triedou .active.

Scrollspy si ukážeme na rôznych komponentoch.

Navbar

Ako prvý si komponent predvedieme na navbare:

<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, ktorým chceme scrollovať, najčastejšie <body>, pridáme atribút data-bs-spy="scroll" a data-bs-target so selektorom navigácie. Tým je scrollspy pripravený. Aby prepojenie medzi navigáciou a obsahom fungovalo, musia 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:

Scrollspy v Bootstrap

scrollspy_navigace.html

Skúsme si posunúť scrollbarom, navigácia sa bude prepínať podľa toho v akej časti dokumentu sa nachádzame. Scrollspy ignoruje neviditeľné elementy.

Viacúrovňová navigácia

Scrollspy dokáže zaktívniť aj rodičov elementu v navigácii, pokiaľ je viacúrovňová. Skúsme 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ážka:

Scrollspy v Bootstrap

scrollspy_viceurovnovy.html

List group

Ukážky zavŕšime vytvorením zvislej navigácie komponentom 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ážka:

Scrollspy v Bootstrap

scrollspy_list_group.html

JavaScript

Komponent opäť môžeme ovládať z JavaScriptu.

Inicializácia

Namiesto použitia dátumu atribútu môžeme vykonať inicializáciu volaním metódy ScrollSpy():

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

Vlastnosti

Pomocou dátumu atribútu data-bs-offset alebo JS vlastnosti offset môžeme nastaviť odsadenie od horného okraja obrazovky, od ktorého sa počíta pozícia scrollbaru. Predvolená hodnota je 10. Obvykle 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

Na jednotlivé metódy sa pozrieme bližšie:

refresh() - Pokiaľ používame scrollspy a pridali sme do stránky nejaký obsah alebo sme ho odobrali, musíme refresh volať spôsobom uvedeným nižšie. Kód pre obnovenie všetkých scrollspy na stránke by vyzeral 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á metóda, ktorá nám umožní získať scrollspy inštanciu spojenú s prvkom DOM.
getOrCreateInstance() - Statická metóda, ktorá nám umožní získať scrollspy inštanciu spojenú s prvkom DOM alebo vytvoriť novú v prípade, že nebola inicializovaná.

Udalosti

Udalosť activate.bs.scrollspy sa vyvolá vo chvíli, keď scrollspy aktivuje položku navigácie. Reakcia na túto udalosť vyzerá napríklad takto:

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
    // Nejaká reakcia...
});

V budúcej lekcii, Bootstrap - Tooltipy , si predstavíme Tooltipy, ich inicializácia a ovládanie JavaScriptom.

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity