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:

Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .
Mora se koristiti na Bootstrap navigacijskoj komponenti ili grupi popisa .
Scrollspy zahtijeva position: relative;element koji špijunirate, obično <body>.
Kada špijunirate elemente koji nisu <body>, svakako imate heightpostavljen i overflow-y: scroll;primijenjen.
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.

Pomičite područje ispod navigacijske trake i promatrajte promjenu aktivne klase. Stavke padajućeg izbornika također će biti istaknute.

@mast

Sadržaj rezerviranog mjesta za primjer scrollspy. Imate najbolju arhitekturu. Pečati u putovnici, ona je kozmopolit. Fino, svježe, žestoko, imamo ga na ključu. Nikad nisam planirao da ću te jednog dana izgubiti. Izjeda ti srce. Tvoj poljubac je kozmički, svaki pokret je magija. Mislim one, mislim kao da je ona ta. Pozdrav voljeni, pođimo na putovanje. Samo doživite noć poput 4. srpnja! Ali radije biste se izgubili.

@mdo

Sadržaj rezerviranog mjesta za primjer scrollspy. Jer ona je muza i umjetnica. (Ovako mi radimo) Dakle, želite se igrati s magijom. Zato samo budi siguran prije nego što mi sve daš. Hodam, šetam po zraku (večeras). Preskočite razgovor, sve ste čuli, vrijeme je za šetnju.

jedan

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Sadržaj rezerviranog mjesta za primjer scrollspy. Ako želiš plesati, ako želiš sve, znaš da sam ja djevojka koju bi trebao pozvati. Hodati kroz oluju bih. Dopusti mi da te odnesem u tvoje rođendansko odijelo. Ona koja je pobjegla. Prošli petak navečer, da, mislim da smo prekršili zakon, uvijek govorimo da ćemo prestati. Jer ona je pomalo Yoko, a pomalo je i 'Oh ne'. Želim da vilica pada, oči iskoče, glava se okreće, tijelo šokira. Da, povećali smo kreditne kartice i izbacili su nas iz bara.

I još malo sadržaja rezerviranog mjesta, za dobru mjeru.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</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

Sadržaj rezerviranog mjesta za primjer scrollspy. Ovo se odnosi na stavku 1. Diže te miljama visoko, tako visoko, jer ona ima taj jedan međunarodni osmijeh. U krevetu mi je stranac, u glavi mi lupa. O ne. U nekom drugom životu natjerao bih te da ostaneš. Jer ja, ja sam sposoban za sve. Spremam se za svoju krunsku bitku. Koristio se za krađu pića tvojih roditelja i penjanje na krov. Ton, tan fit i spreman, pojačaj jer postaje težak. Njena ljubav je poput droge. Valjda sam zaboravio da imam izbora.

Točka 1-1

Sadržaj rezerviranog mjesta za primjer scrollspy. Ovo se odnosi na stavku 1-1. Imate najbolju arhitekturu. Pečati u putovnici, ona je kozmopolit. Fino, svježe, žestoko, imamo ga na ključu. Nikad nisam planirao da ću te jednog dana izgubiti. Izjeda ti srce. Tvoj poljubac je kozmički, svaki pokret je magija. Mislim one, mislim kao da je ona ta. Pozdrav voljeni, pođimo na putovanje. Samo doživite noć poput 4. srpnja! Ali radije biste se izgubili.

Točka 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Sadržaj rezerviranog mjesta za primjer scrollspy. Ovo se odnosi na stavku 3-2. Originalni ste, ne možete ga zamijeniti. Cijelu noć sviraju, tvoja pjesma. Cure iz Kalifornije, mi smo neporecive. Kao ptica bez kaveza. Sada nema straha, pusti i samo budi slobodan, voljet ću te bezuvjetno. Vidim natpis na zidu. Mogli biste putovati svijetom, ali ništa nije ni blizu zlatnoj obali.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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 Stavka 2 Stavka 3 Stavka 4

Stavka 1

Sadržaj rezerviranog mjesta za primjer grupe scrollspy popisa. Ovo se odnosi na stavku 1. Ne trebam isprike. Sada nema straha, pusti i samo budi slobodan, voljet ću te bezuvjetno. Prošli petak navečer. Ne budi sramežljiv momak, kladim se da je prelijepo. Ljeto nakon srednje škole kada smo se prvi put sreli. Jer ona je muza i umjetnica. Što? Čekati. Mislio sam da sam ja iznimka.

Stavka 2

Sadržaj rezerviranog mjesta za primjer grupe scrollspy popisa. Ovo se odnosi na stavku 2. Da, ona pleše u vlastitom ritmu. O ne. Mogao si biti najveći. Jer, dušo, ti si vatromet. Možda je razlog zašto su sva vrata zatvorena. Otvorite svoje srce i pustite da počne. Tako très chic, da, ona je klasik.

Stavka 3

Sadržaj rezerviranog mjesta za primjer grupe scrollspy popisa. Ovo se odnosi na točku 3. Idemo sve više i više. Nikad jedan bez drugog, sklopili smo pakt. Hodam po zraku. Netko je rekao da ste uklonili tetovažu. Sada lebdim kao leptir. Ton, tan fit i spreman, pojačaj jer postaje težak. Jer jednom kad si moj, jednom si moj. Samo moraš zapaliti svjetlo i pustiti ga da zasja! Pa smo krenuli na bulevar. Osjećate li se ikada, osjećate li se tako tankim kao papir. Vidim sve, vidim sada.

Stavka 4

Sadržaj rezerviranog mjesta za primjer grupe scrollspy popisa. Ovo se odnosi na stavku 4. Ljeto nakon srednje škole kada smo se prvi put sreli. Sada nema straha, pusti i samo budi slobodan, voljet ću te bezuvjetno. Osunčana koža tako vruća da ćemo otopiti tvoj sladoled. Ova ljubav će vas natjerati da levitirate.

<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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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-spy="scroll"elementu koji želite špijunirati (najčešće bi to bio <body>). Zatim dodajte data-targetatribut s ID-om ili klasom nadređenog elementa bilo koje Bootstrap .navkomponente.

body {
  position: relative;
}

<body data-spy="scroll" data-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:

$('body').scrollspy({ 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>.

Elementi koji nisu `:visible`ciljani zanemareni

Ciljani elementi koji nisu :visibleu skladu s jQueryjem bit će zanemareni i njihove odgovarajuće navigacijske stavke nikada neće biti istaknute.

Metode

`.scrollspy('refresh')`

Kada koristite scrollspy u kombinaciji s dodavanjem ili uklanjanjem elemenata iz DOM-a, morat ćete pozvati metodu osvježavanja na sljedeći način:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

`.scrollspy('dispose')`

Uništava scrollspy elementa.

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset="".

Ime	Tip	Zadano	Opis
pomaknuti	broj	10	Pikseli za pomak od vrha pri izračunavanju položaja pomicanja.
metoda	niz	auto	Pronalazi u kojem se odjeljku nalazi špijunirani element. `auto`odabrat će najbolju metodu za dobivanje koordinata pomicanja. `offset`koristit će jQuery offset metodu za dobivanje koordinata pomicanja. `position`koristit će jQuery metodu položaja za dobivanje koordinata pomicanja.
cilj	niz \| jQuery objekt \| DOM element		Određuje element za primjenu Scrollspy dodatka.

Događaji

Vrsta događaja	Opis
aktivirati.bs.scrollspy	Ovaj događaj pokreće se na elementu pomicanja svaki put kada se nova stavka aktivira scrollspy-om.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Kako radi

Primjer u navigacijskoj traci

@mast

@mdo

jedan

two

three

Primjer s ugniježđenom navigacijom

Stavka 1

Točka 1-1

Točka 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Primjer s grupom popisa

Stavka 1

Stavka 2

Stavka 3

Stavka 4

Korištenje

Preko atributa podataka

Preko JavaScripta

Potrebni su razrješivi ID ciljevi

Elementi koji nisu :visibleciljani zanemareni

Metode

.scrollspy('refresh')

.scrollspy('dispose')

Mogućnosti

Događaji

Elementi koji nisu `:visible`ciljani zanemareni

`.scrollspy('refresh')`

`.scrollspy('dispose')`