in English

Scrollspy

Samodejno posodobi navigacijo Bootstrap ali komponente skupine seznamov na podlagi položaja drsenja, da pokaže, katera povezava je trenutno aktivna v vidnem polju.

Kako deluje

Scrollspy ima nekaj zahtev za pravilno delovanje:

  • Če gradite naš JavaScript iz izvorne kode, zahtevautil.js .
  • Uporabiti ga je treba v navigacijski komponenti ali skupini seznamov Bootstrap .
  • Scrollspy zahteva position: relative;element, za katerim vohunite, običajno <body>.
  • Ko vohunite za elementi, ki niso <body>, se prepričajte, da imate heightnastavljen in overflow-y: scroll;uporabljen.
  • Sidra ( <a>) so obvezna in morajo kazati na element s tem id.

Ko bo uspešno izvedena, se bo vaša navigacija ali skupina seznamov ustrezno posodobila in premaknila .activerazred od enega elementa do drugega glede na njihove povezane cilje.

Primer v vrstici za krmarjenje

Pomaknite se po območju pod vrstico za krmarjenje in opazujte spremembo aktivnega razreda. Označeni bodo tudi spustni elementi.

@debela

Vsebina ograde za primer scrollspy. Imate najboljšo arhitekturo. Žigi v potnem listu, je svetovljanka. Fino, sveže, ostro, imamo ga na zaklepu. Nikoli nisem načrtoval, da te bom nekega dne izgubil. Požre ti srce. Tvoj poljub je vesoljski, vsak gib je čaroben. Mislim tiste, mislim, kot da je ona tista. Lep pozdrav ljubljeni, gremo na potovanje. Samo privoščite si noč, kot je 4. julij! Ampak raje bi se izgubili.

@mdo

Vsebina ograde za primer scrollspy. Ker je muza in umetnica. (Tako delamo mi) Torej se želite igrati s čarovnijo. Zato se le prepričaj, preden mi daš vse. Hodim, hodim po zraku (nocoj). Preskočite pogovor, vse ste slišali, čas je za sprehod.

eno

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

Vsebina ograde za primer scrollspy. Če hočeš plesati, če hočeš vse, veš, da sem jaz dekle, ki bi ga moral poklicati. Hodil bi skozi nevihto. Naj te torej oblečem v rojstnodnevno obleko. Tisti, ki je pobegnil. Prejšnji petek zvečer, ja, mislim, da smo prekršili zakon, vedno pravimo, da bomo nehali. Ker je malo Yoko, in malo je 'Oh ne'. Hočem, da mi pade čeljust, oči izskočijo, glava se obrača, telo šokira. Ja, napolnili smo kreditne kartice in so nas vrgli iz bara.

In še nekaj nadomestne vsebine za dobro mero.

<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>

Primer z ugnezdeno nav

Scrollspy deluje tudi z ugnezdenimi .navs. Če je ugnezdeni .nav, .activebodo tudi njegovi starši .active. Pomaknite se po območju poleg vrstice za krmarjenje in opazujte spremembo aktivnega razreda.

Točka 1

Vsebina ograde za primer scrollspy. Ta se nanaša na točko 1. Ponese te milje visoko, tako visoko, ker ima tisti mednarodni nasmeh. V moji postelji je tujec, v moji glavi razbija. Oh, ne. V drugem življenju bi te prisilil, da ostaneš. Ker jaz, jaz sem sposoben vsega. Pripravljam se za mojo kronsko bitko. Ukradel alkohol tvojih staršev in splezal na streho. Tone, tan fit in pripravljen, povečajte, ker postaja težko. Njena ljubezen je kot droga. Mislim, da sem pozabil, da imam izbiro.

Postavka 1-1

Vsebina ograde za primer scrollspy. Ta se nanaša na postavko 1-1. Imate najboljšo arhitekturo. Žigi v potnem listu, je svetovljanka. Fino, sveže, ostro, imamo ga na zaklepu. Nikoli nisem načrtoval, da te bom nekega dne izgubil. Požre ti srce. Tvoj poljub je vesoljski, vsak gib je čaroben. Mislim tiste, mislim, kot da je ona tista. Lep pozdrav ljubljeni, gremo na potovanje. Samo privoščite si noč, kot je 4. julij! Ampak raje bi 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

Vsebina ograde za primer scrollspy. Ta se nanaša na točko 3-2. Ste originalni, ne morete ga zamenjati. Vso noč igrajo tvojo pesem. Dekleta iz Kalifornije, ne moremo zanikati. Kot ptica brez kletke. Zdaj ni strahu, prepusti se in samo bodi svoboden, ljubil te bom brezpogojno. Vidim napis na steni. Lahko bi potoval po svetu, a nič se ne približa zlati 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>

Primer s skupino seznamov

Scrollspy deluje tudi s .list-groups. Pomaknite se po območju poleg skupine seznama in opazujte spremembo aktivnega razreda.

Točka 1

Vsebina nadomestnega znaka za primer skupine seznamov scrollspi. Ta se nanaša na točko 1. Ne potrebujem opravičil. Zdaj ni strahu, prepusti se in samo bodi svoboden, ljubil te bom brezpogojno. Zadnji petek zvečer. Ne bodi sramežljiv. Stavim, da je lepo. Poletje po srednji šoli, ko sva se prvič srečala. Ker je muza in umetnica. Kaj? Počakaj. Mislil sem, da sem izjema.

Točka 2

Vsebina nadomestnega znaka za primer skupine seznamov scrollspi. Ta se nanaša na točko 2. Ja, pleše v svojem ritmu. Oh, ne. Lahko bi bil največji. Ker, srček, ti ​​si ognjemet. Mogoče razlog, zakaj so vsa vrata zaprta. Odprite svoje srce in pustite, da se začne. Tako très chic, ja, ona je klasika.

Točka 3

Vsebina nadomestnega znaka za primer skupine seznamov scrollspi. Ta se nanaša na točko 3. Gremo vse višje. Nikoli eden brez drugega, sklenili smo pakt. Hodim po zraku. Nekdo je rekel, da si dal odstraniti tetovažo. Zdaj lebdim kot metulj. Tone, tan fit in pripravljen, povečajte, ker postaja težko. Ker enkrat si moj, enkrat si moj. Samo prižgati moraš luč in pustiti, da sveti! Tako smo prišli na bulevar. Se kdaj počutite tako tanke za papir. Vidim vse, vidim zdaj.

Točka 4

Vsebina nadomestnega znaka za primer skupine seznamov scrollspi. Ta se nanaša na točko 4. Poletje po srednji šoli, ko sva se prvič srečala. Zdaj ni strahu, prepusti se in samo bodi svoboden, ljubil te bom brezpogojno. Od sonca poljubljena koža je tako vroča, da bomo stopili vaše sladoledne sladolede. Ta ljubezen vas bo dvignila.

<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>

Uporaba

Preko podatkovnih atributov

Če želite enostavno dodati vohunsko vedenje v svojo zgornjo vrstico, dodajte data-spy="scroll"element, za katerim želite vohuniti (najpogosteje je to <body>). Nato dodajte data-targetatribut z ID-jem ali razredom nadrejenega elementa katere koli .navkomponente Bootstrap.

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>

Prek JavaScripta

Ko dodate position: relative;svoj CSS, pokličite scrollspy prek JavaScripta:

$('body').scrollspy({ target: '#navbar-example' })

Zahtevani so razrešljivi ID cilji

Povezave vrstice za krmarjenje morajo imeti razločljive cilje ID-ja. Na primer, <a href="#home">home</a>mora ustrezati nečemu v DOM, kot je <div id="home"></div>.

Neciljni :visibleelementi so prezrti

Ciljni elementi, ki niso :visiblev skladu z jQuery , bodo prezrti in njihovi ustrezni navigacijski elementi ne bodo nikoli označeni.

Metode

.scrollspy('refresh')

Ko uporabljate scrollspy v povezavi z dodajanjem ali odstranjevanjem elementov iz DOM, boste morali poklicati metodo osveževanja takole:

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

.scrollspy('dispose')

Uniči scrollspy elementa.

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset="".

Ime Vrsta Privzeto Opis
odmik število 10 Slikovne pike za zamik od vrha pri izračunu položaja drsenja.
metoda vrvica avto Ugotovi, v katerem razdelku je vohunjeni element. Izbere autonajboljši način za pridobitev koordinat drsenja. offsetbo za pridobivanje koordinat drsenja uporabil metodo odmika jQuery. positionbo za pridobitev koordinat drsenja uporabil metodo položaja jQuery.
tarča niz | jQuery predmet | element DOM Določa element za uporabo vtičnika Scrollspy.

Dogodki

Vrsta dogodka Opis
activate.bs.scrollspy Ta dogodek se sproži na elementu drsenja vsakič, ko scrollspy aktivira nov element. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})