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:

Ako gradite naš JavaScript iz izvora, on zahtijevautil.js .
Mora se koristiti na Bootstrap navigacijskoj komponenti ili grupi liste .
Scrollspy zahtijeva position: relative;element koji špijunirate, obično <body>.
Kada špijunirate druge elemente osim <body>, budite sigurni da imate heightset i overflow-y: scroll;primijenjen.
Sidra ( <a>) su obavezna i moraju pokazivati na element s tim id.

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.

Skrolujte područje ispod navigacijske trake i gledajte kako se aktivni razred mijenja. Padajuće stavke će također biti istaknute.

@debeo

Sadržaj čuvara mjesta za primjer scrollspy-a. Imaš najbolju arhitekturu. Pečati u pasoš, ona je kosmopolita. Fino, svježe, žestoko, imamo ga na ključu. Nikad nisam planirao da ću te jednog dana izgubiti. Ona ti jede srce. Tvoj poljubac je kosmički, svaki pokret je magija. Mislim na one, mislim kao da je ona ta. Pozdrav dragim ljudima idemo na putovanje. Samo posjedujte noć kao što je 4. jul! Ali radije se gubite.

@mdo

Sadržaj čuvara mjesta za primjer scrollspy-a. Jer ona je muza i umjetnica. (Ovako radimo) Dakle, želite da se igrate magijom. Zato budi siguran prije nego što mi sve daš. Hodam, hodam po zraku (večeras). Preskočite razgovor, čuo sam sve, 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 čuvara mjesta za primjer scrollspy-a. Ako želiš plesati, ako želiš sve, znaš da sam ja djevojka koju bi trebao zvati. Prošetao bih kroz oluju. Pa daj da te obučem u tvoje rođendansko odijelo. Onaj koji je pobjegao. Prošlog petka uveče, da, mislim da smo prekršili zakon, uvek reci da ćemo stati. Jer ona je pomalo Yoko, i ona je pomalo 'Oh ne'. Želim da mi se vilice, oči iskoče, okreće glava, šokira tijelo. Da, povećali smo svoje kreditne kartice i izbačeni smo iz bara.

I još malo sadržaja za čuvanje 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 sa ugniježđenom navigacijom

Scrollspy također radi sa ugniježđenim .navs. .navAko je ugniježđeni .active, njegovi roditelji će također biti .active. Skrolujte područje pored navigacijske trake i gledajte kako se aktivni razred mijenja.

Stavka 1

Sadržaj čuvara mjesta za primjer scrollspy-a. Ovo se odnosi na stavku 1. Odvodi te miljama visoko, tako visoko, jer ona ima onaj međunarodni osmeh. U krevetu mi je stranac, u glavi mi lupa. O ne. U drugom životu bih te naterao da ostaneš. Jer ja sam sposoban za sve. Odlikovana za moju krunsku bitku. Korišćen za krađu pića od vaših roditelja i penjanje na krov. Ton, preplanuli i spremni, pojačajte jer postaje težak. Njena ljubav je kao droga. Valjda sam zaboravio da imam izbor.

Stavka 1-1

Sadržaj čuvara mjesta za primjer scrollspy-a. Ovo se odnosi na tačku 1-1. Imaš najbolju arhitekturu. Pečati u pasoš, ona je kosmopolita. Fino, svježe, žestoko, imamo ga na ključu. Nikad nisam planirao da ću te jednog dana izgubiti. Ona ti jede srce. Tvoj poljubac je kosmički, svaki pokret je magija. Mislim na one, mislim kao da je ona ta. Pozdrav dragim ljudima idemo na putovanje. Samo posjedujte noć kao što je 4. jul! Ali radije se gubite.

Stavka 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 čuvara mjesta za primjer scrollspy-a. Ovo se odnosi na tačku 3-2. Originalni ste, ne može se zamijeniti. Cijelu noć sviraju, tvoja pjesma. Devojke iz Kalifornije smo neporecive. Kao ptica bez kaveza. Sada nema straha, pusti i samo budi slobodan, voleću te bezuslovno. Vidim natpis na zidu. Mogli biste putovati svijetom, ali ništa nije 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 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 Stavka 2 Stavka 3 Stavka 4

Stavka 1

Sadržaj čuvara mjesta za primjer grupe lista za pomicanje. Ovo se odnosi na tačku 1. Ne treba mi izvinjenje. Sada nema straha, pusti i samo budi slobodan, voleću te bezuslovno. Prošlog petka naveče. Ne budi stidljiv tip. Kladim se da je prelepo. Ljeto nakon srednje škole kada smo se prvi put sreli. Jer ona je muza i umjetnica. Šta? Čekaj. Mislio sam da sam ja izuzetak.

Stavka 2

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

Stavka 3

Sadržaj čuvara mjesta za primjer grupe lista za pomicanje. Ovo se odnosi na tačku 3. Idemo sve više i više. Nikad jedno bez drugog, sklopili smo pakt. Hodam po zraku. Neko je rekao da ste uklonili tetovažu. Sada plutam kao leptir. Ton, preplanuli i spremni, pojačajte jer postaje težak. Jer jednom kad si moj, jednom si moj. Samo treba upaliti svjetlo i pustiti ga da zasja! Pa smo izašli na bulevar. Da li se ikada osjećate tako tankim papirom. Vidim sve, vidim i sada.

Stavka 4

Sadržaj čuvara mjesta za primjer grupe lista za pomicanje. Ovo se odnosi na tačku 4. Ljeto nakon srednje škole kada smo se prvi put sreli. Sada nema straha, pusti i samo budi slobodan, voleću te bezuslovno. Koža obasjana suncem tako vruća da ćemo vam rastopiti 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>

Upotreba

Preko atributa podataka

Da biste lako dodali ponašanje skrolovanja vašoj navigaciji na gornjoj traci, dodajte data-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bio <body>). Zatim dodajte data-targetatribut s ID-om ili klasom roditeljskog 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 što dodate position: relative;svoj CSS, pozovite scrollspy putem JavaScripta:

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

Neciljni `:visible`elementi zanemareni

Ciljni elementi koji nisu u :visibleskladu s jQueryjem će biti zanemareni i njihove odgovarajuće navigacijske stavke nikada neće biti istaknute.

Metode

`.scrollspy('refresh')`

Kada koristite scrollspy u kombinaciji sa 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 špijun za pomicanje elementa.

Opcije

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

Ime	Tip	Default	Opis
offset	broj	10	Pikseli za pomicanje od vrha prilikom izračunavanja položaja pomicanja.
metoda	string	auto	Pronalazi u kojem se dijelu nalazi špijunirani element. Odabrat `auto`će najbolju metodu za dobivanje koordinata pomicanja. `offset`će koristiti jQuery offset metod da dobije koordinate pomeranja. `position`će koristiti jQuery metodu položaja da dobije koordinate pomeranja.
cilj	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.

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

Scrollspy

Kako radi

Primjer u navigacijskoj traci

@debeo

@mdo

jedan

two

three

Primjer sa ugniježđenom navigacijom

Stavka 1

Stavka 1-1

Stavka 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Primjer sa list-grupom

Stavka 1

Stavka 2

Stavka 3

Stavka 4

Upotreba

Preko atributa podataka

Preko JavaScripta

Potrebni su rješivi ID ciljevi

Neciljni :visibleelementi zanemareni

Metode

.scrollspy('refresh')

.scrollspy('dispose')

Opcije

Događaji

Neciljni `:visible`elementi zanemareni

`.scrollspy('refresh')`

`.scrollspy('dispose')`