Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
in English

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.

Na ovoj stranici

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 tim id.

Kada se uspješno implementira, vaša navigacija ili grupa popisa ažurirat će se u skladu s tim, premještajući .activeklasu 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 heightskup 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 .navs. .navAko 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-groups. 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-targetatribut s ID-om ili klasom nadređenog 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 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. autoodabrat će najbolju metodu za dobivanje koordinata pomicanja. offsetkoristit će Element.getBoundingClientRect()metodu za dobivanje koordinata pomicanja. positionkoristit će svojstva HTMLElement.offsetTopi HTMLElement.offsetLeftza 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...
})