Scrollspy
Automaticky aktualizujte navigaci Bootstrap nebo seznam součástí skupiny na základě pozice posouvání, abyste označili, který odkaz je aktuálně aktivní ve výřezu.
Jak to funguje
Scrollspy má několik požadavků, aby správně fungoval:
- Musí být použit v komponentě Bootstrap nav nebo skupině seznamů .
- Scrollspy vyžaduje
position: relative;
na prvku, který špehujete, obvykle<body>
. - Kotvy (
<a>
) jsou povinné a musí ukazovat na prvek s tímid
.
Po úspěšné implementaci se vaše navigace nebo skupina seznamů odpovídajícím způsobem aktualizuje a přesune .active
třídu z jedné položky na další na základě jejich přidružených cílů.
Posouvatelné kontejnery a přístup z klávesnice
Pokud vytváříte rolovatelný kontejner (jiný než <body>
), ujistěte se, že máte height
sadu a overflow-y: scroll;
aplikovanou na ni – spolu s a tabindex="0"
, abyste zajistili přístup z klávesnice.
Příklad v navigační liště
Posouvejte oblast pod navigační lištou a sledujte, jak se aktivní třída mění. Rozbalovací položky budou také zvýrazněny.
První nadpis
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Druhý nadpis
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Třetí nadpis
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Čtvrtý nadpis
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Pátý nadpis
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
</div>
Příklad s vnořenou navigací
Scrollspy funguje také s vnořenými .nav
s. Pokud je vnořený objekt .nav
, .active
jeho rodiče budou také .active
. Posouvejte oblast vedle navigačního panelu a sledujte, jak se aktivní třída mění.
Položka 1
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 1-1
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 1-2
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 2
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 3
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Bod 3-1
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Bod 3-2
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Příklad s list-group
Scrollspy také pracuje s .list-group
s. Posouvejte oblast vedle skupiny seznamu a sledujte, jak se aktivní třída mění.
Položka 1
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 2
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 3
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
Položka 4
Toto je nějaký zástupný obsah pro scrollspy stránku. Všimněte si, že při posouvání stránky dolů se zvýrazní příslušný navigační odkaz. Opakuje se v celém příkladu komponenty. Stále přidáváme další ukázkové kopie, abychom zdůraznili posouvání a zvýrazňování.
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
Používání
Prostřednictvím datových atributů
Chcete-li do navigace v horní liště snadno přidat scrollspy chování, přidejte data-bs-spy="scroll"
k prvku, který chcete špehovat (nejčastěji by to byl <body>
). Potom přidejte data-bs-target
atribut s ID nebo třídou nadřazeného prvku libovolné .nav
komponenty Bootstrap.
body {
position: relative;
}
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Prostřednictvím JavaScriptu
Po přidání position: relative;
CSS zavolejte scrollspy přes JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Jsou vyžadovány rozlišitelné ID cíle
Odkazy na navigační liště musí mít řešitelné cíle id. Například <a href="#home">home</a>
musí odpovídat něčemu v DOM, jako je <div id="home"></div>
.
Neviditelné cílové prvky jsou ignorovány
Cílové prvky, které nejsou viditelné, budou ignorovány a jejich odpovídající navigační položky nebudou nikdy zvýrazněny.
Metody
Obnovit
Když používáte scrollspy ve spojení s přidáváním nebo odebíráním prvků z DOM, budete muset volat metodu refresh takto:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
zlikvidovat
Zničí scrollspy prvku. (Odstraní uložená data v prvku DOM)
getInstance
Statická metoda, která vám umožní získat instanci scrollspy přidruženou k prvku DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statická metoda, která vám umožní získat scrollspy instanci spojenou s prvkem DOM nebo vytvořit novou v případě, že nebyla inicializována
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Možnosti
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-
, jako v data-bs-offset=""
.
název | Typ | Výchozí | Popis |
---|---|---|---|
offset |
číslo | 10 |
Pixely k odsazení shora při výpočtu polohy posouvání. |
method |
tětiva | auto |
Zjistí, ve které sekci se špehovaný prvek nachází. auto vybere nejlepší metodu k získání souřadnic posouvání. offset použije Element.getBoundingClientRect() metodu k získání souřadnic posouvání. position použije vlastnosti HTMLElement.offsetTop a HTMLElement.offsetLeft k získání souřadnic posouvání. |
target |
řetězec | objekt jQuery | prvek DOM | Určuje prvek, na který se má použít plugin Scrollspy. |
Události
Typ události | Popis |
---|---|
activate.bs.scrollspy |
Tato událost se spustí na prvku scroll vždy, když bude scrollspy aktivována nová položka. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})