Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
C# .NET + discount 30

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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.


 

Předchozí článek
Bootstrap - Popovers
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Bootstrap - Tooltipy
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
35 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře

Avatar
KaMl
Člen
Avatar
KaMl:5.9.2021 11:44

To jsou úžasné lekce! Díky! :-)
Konečně jsem se dozvěděla kde vzít komponenty pro "akční web". Doteď jsem o Tooltipech, Popovers, Breadcrumb ani Scrollspy nesylšela... Už jsem si myslela, že si budu muset vystačit s JavaScriptovým: confirm(), prompt() a alert() - ale haprovalo to designování...

 
Odpovědět
5.9.2021 11:44
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.

Zobrazeno 1 zpráv z 1.