Scrollspy
Automatski ažurirajte Bootstrap navigaciju ili komponente liste grupe na osnovu položaja pomeranja da biste naznačili koja je veza trenutno aktivna u okviru za prikaz.
Kako radi
Scrollspy ima nekoliko zahtjeva za pravilno funkcioniranje:
- Mora se koristiti na Bootstrap navigacijskoj komponenti ili grupi liste .
- Scrollspy zahtijeva
position: relative;element koji špijunirate, obično<body>. - Sidra (
<a>) su obavezna i moraju pokazivati na element s timid.
Kada se uspješno implementira, vaša navigacijska ili lista grupa će se ažurirati u skladu s tim, premještajući .activeklasu s jedne stavke na drugu na osnovu njihovih povezanih ciljeva.
Kontejneri koji se mogu pomicati i pristup tastaturi
Ako pravite kontejner koji se može pomicati (osim <body>), budite sigurni da imate heightset i overflow-y: scroll;primijenjen na njega—pored a tabindex="0"da biste osigurali pristup tastaturi.
Primjer u navigacijskoj traci
Skrolujte područje ispod navigacijske trake i gledajte kako se aktivni razred mijenja. Padajuće stavke će također biti istaknute.
Prvi naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Drugi naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Treći naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Četvrti naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Peti naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka 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 sa ugniježđenom navigacijom
Scrollspy također radi sa ugniježđenim .navs. .navAko je ugniježđeni .active, njegovi roditelji će također biti .active. Pomičite područje pored navigacijske trake i gledajte kako se aktivni razred mijenja.
Stavka 1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 1-1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 1-2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 3-1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Tačka 3-2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka 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 sa list-grupom
Scrollspy takođe radi sa .list-groups. Pomičite se po području pored grupe liste i gledajte kako se aktivna klasa mijenja.
Stavka 1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 4
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka 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>
Upotreba
Preko atributa podataka
Da biste lako dodali ponašanje skrolovanja vašoj navigaciji na gornjoj traci, dodajte data-bs-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bio <body>). Zatim dodajte data-bs-targetatribut s ID-om ili klasom roditeljskog elementa bilo koje Bootstrap .navkomponente.
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 što dodate position: relative;svoj CSS, pozovite scrollspy putem JavaScripta:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Potrebni su rješivi ID ciljevi
Navbar veze moraju imati razlučive ciljeve ID-a. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u DOM-u kao što je <div id="home"></div>.
Nevidljivi ciljni elementi su zanemareni
Ciljni elementi koji nisu vidljivi će biti zanemareni i njihove odgovarajuće navigacijske stavke nikada neće biti istaknute.
Metode
Osvježiti
Kada koristite scrollspy u kombinaciji sa 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()
})
dispose
Uništava špijun za pomicanje elementa. (Uklanja pohranjene podatke na DOM elementu)
getInstance
Statička metoda koja vam omogućava da dobijete scrollspy instancu povezanu sa 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ćava da dobijete scrollspy instancu povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Opcije
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 | Default | Opis |
|---|---|---|---|
offset |
broj | 10 |
Pikseli za pomicanje od vrha prilikom izračunavanja položaja pomicanja. |
method |
string | auto |
Pronalazi u kojem se dijelu nalazi špijunirani element. Odabrat autoće najbolju metodu za dobivanje koordinata pomicanja. offsetće koristiti Element.getBoundingClientRect()metodu da dobije koordinate pomeranja. positionće koristiti svojstva HTMLElement.offsetTopi za dobivanje koordinata za pomicanje.HTMLElement.offsetLeft |
target |
string | jQuery objekat | DOM element | Određuje element za primjenu Scrollspy dodatka. |
Događaji
| Vrsta događaja | Opis |
|---|---|
activate.bs.scrollspy |
Ovaj događaj se pokreće na elementu za pomicanje svaki put kada se nova stavka aktivira pomoću scrollspy-a. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})