Scrollspy
Automatski ažurirajte Bootstrap navigaciju ili komponente grupe popisa na temelju položaja pomicanja kako biste označili koja je veza trenutno aktivna u okviru za prikaz.
Kako radi
Scrollspy ima nekoliko zahtjeva za ispravno funkcioniranje:
- Mora se koristiti na Bootstrap navigacijskoj komponenti ili grupi popisa .
- Scrollspy zahtijeva
position: relative;
element koji špijunirate, obično<body>
. - Sidra (
<a>
) su obavezna i moraju ukazivati na element s timid
.
Kada se uspješno implementira, vaša navigacija ili grupa popisa ažurirat će se u skladu s tim, premještajući .active
klasu s jedne stavke na drugu na temelju njihovih povezanih ciljeva.
Spremnici koji se mogu pomicati i pristup tipkovnicom
Ako izrađujete spremnik koji se može pomicati (osim <body>
), pobrinite se da imate height
skup i overflow-y: scroll;
primijenjen na njega—uz a tabindex="0"
kako biste osigurali pristup tipkovnicom.
Primjer u navigacijskoj traci
Pomičite područje ispod navigacijske trake i promatrajte promjenu aktivne klase. Stavke padajućeg izbornika također će biti istaknute.
Prvi naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Drugi naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Treći naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Četvrti naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Peti naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
<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>
Primjer s ugniježđenom navigacijom
Scrollspy također radi s ugniježđenim .nav
s. .nav
Ako je ugniježđeni .active
, njegovi roditelji također će biti .active
. Pomičite područje pored navigacijske trake i promatrajte promjenu aktivne klase.
Stavka 1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Točka 1-1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Točka 1-2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Točka 3-1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Točka 3-2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
<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>
Primjer s grupom popisa
Scrollspy također radi sa .list-group
s. Pomaknite se područjem pored grupe popisa i promatrajte promjenu aktivne klase.
Stavka 1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 4
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
<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>
Korištenje
Preko atributa podataka
Da biste jednostavno dodali scrollspy ponašanje svojoj navigaciji gornje trake, dodajte data-bs-spy="scroll"
elementu koji želite špijunirati (najčešće bi to bio <body>
). Zatim dodajte data-bs-target
atribut s ID-om ili klasom nadređenog elementa bilo koje Bootstrap .nav
komponente.
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>
Preko JavaScripta
Nakon dodavanja position: relative;
vašeg CSS-a, pozovite scrollspy putem JavaScripta:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Potrebni su razrješivi ID ciljevi
Veze na navigacijskoj traci moraju imati razrješive ID ciljeve. Na primjer, <a href="#home">home</a>
mora odgovarati nečemu u DOM-u kao što je <div id="home"></div>
.
Nevidljivi ciljni elementi zanemareni
Elementi cilja koji nisu vidljivi bit će zanemareni i njihove odgovarajuće navigacijske stavke nikada neće biti istaknute.
Metode
osvježiti
Kada koristite scrollspy u kombinaciji s dodavanjem ili uklanjanjem elemenata iz DOM-a, morat ćete pozvati metodu osvježavanja na sljedeći način:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
raspolagati
Uništava scrollspy elementa. (Uklanja pohranjene podatke na DOM elementu)
getInstance
Statička metoda koja vam omogućuje da dobijete scrollspy instancu povezanu s DOM elementom
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statička metoda koja vam omogućuje dobivanje instance scrollspy povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-bs-
, kao u data-bs-offset=""
.
Ime | Tip | Zadano | Opis |
---|---|---|---|
offset |
broj | 10 |
Pikseli za pomak od vrha pri izračunavanju položaja pomicanja. |
method |
niz | auto |
Pronalazi u kojem se odjeljku nalazi špijunirani element. auto odabrat će najbolju metodu za dobivanje koordinata pomicanja. offset koristit će Element.getBoundingClientRect() metodu za dobivanje koordinata pomicanja. position koristit će svojstva HTMLElement.offsetTop i HTMLElement.offsetLeft za dobivanje koordinata pomicanja. |
target |
niz | jQuery objekt | DOM element | Određuje element za primjenu Scrollspy dodatka. |
Događaji
Vrsta događaja | Opis |
---|---|
activate.bs.scrollspy |
Ovaj događaj pokreće se na elementu pomicanja svaki put kada se nova stavka aktivira scrollspy-om. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})