in English

Scrollspy

Automatysk update Bootstrap-navigaasje of list groepkomponinten basearre op scrollposysje om oan te jaan hokker keppeling op it stuit aktyf is yn 'e viewport.

Hoe't it wurket

Scrollspy hat in pear easken om goed te funksjonearjen:

  • As jo ​​​​ús JavaScript bouwe fanút boarne, fereasketutil.js it .
  • It moat brûkt wurde op in Bootstrap nav komponint of list groep .
  • Scrollspy fereasket position: relative;op it elemint dat jo bespionearje, meastal de <body>.
  • Wannear't spying op oare eleminten as de <body>, wês wis te hawwen in heightset en overflow-y: scroll;tapast.
  • Ankers ( <a>) binne ferplichte en moatte wize op in elemint mei dat id.

As suksesfol ymplementearre, sil jo nav- of listgroep dienlik bywurkje, en de .activeklasse ferpleatse fan it iene item nei it folgjende basearre op har assosjearre doelen.

Foarbyld yn navbar

Rôlje it gebiet ûnder de navigaasjebalke en besjoch de aktive klasse feroarje. De dropdown-items sille ek markearre wurde.

@fet

Plakhâlder ynhâld foar de scrollspy foarbyld. Jo hawwe de moaiste arsjitektuer. Paspoartstempels, se is kosmopolyt. Fijn, fris, fûl, wy krigen it op slot. Nea pland dat ik dy ien dei ferlieze soe. Se yt dyn hert út. Jo tút is kosmysk, elke beweging is magy. Ik bedoel de iene, ik bedoel as se de iene is. Groeten leafsten lit ús in reis nimme. Besit gewoan de nacht lykas de 4e july! Mar jo wolle leaver fergriemd wurde.

@mdo

Plakhâlder ynhâld foar de scrollspy foarbyld. Want sy is de muze en de keunstner. (Dit is hoe't wy dogge) Dat jo wolle boartsje mei magy. Dus wês gewoan wis foardat jo it alles oan my jouwe. Ik rin, ik rin op 'e loft (fannacht). Oerslaan it praat, hearde it allegear, tiid om te kuierjen.

ien

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

Plakhâlder ynhâld foar de scrollspy foarbyld. As jo ​​​​dûnsje wolle, as jo alles wolle, wite jo dat ik it famke bin dat jo neame moatte. Rinne troch de stoarm soe ik. Dus lit my dy yn dyn jierdei pak krije. Dejinge dy't fuort kaam. Ofrûne freedtejûn, ja, ik tink dat wy de wet hawwe brutsen, sizze altyd dat wy ophâlde. Omdat se is in bytsje fan Yoko, En se is in bytsje fan 'Oh nee'. Ik wol de kaak dropin ', eye poppin', head turnin ', body shockin'. Ja, wy makken ús kredytkaarten maksimaal en waarden út 'e bar skopt.

En wat mear plakhâlder ynhâld, foar goede maatregel.

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

Foarbyld mei nested nav

Scrollspy wurket ek mei geneste .navs. As in nêst .navis .active, sille syn âlden ek wêze .active. Rôlje it gebiet neist de navigaasjebalke en besjoch de aktive klasse feroarje.

Artikel 1

Plakhâlder ynhâld foar de scrollspy foarbyld. Dizze is relatearre oan item 1. Bringt jo kilometers heech, sa heech, om't se dy iene ynternasjonale glimke hat. Der sit in frjemdling yn myn bêd, der kloppet my yn 'e holle. Och, nee. Yn in oar libben soe ik meitsje dy bliuwe. Want ik, ik bin ta alles by steat. Oanpast foar myn kroanslach. Wurdt brûkt om de drank fan dyn âlden te stellen en nei it dak te klimmen. Toan, tan fit en klear, draai it omheech want it wurdt swier. Har leafde is as in drugs. Ik tink dat ik fergeat dat ik in kar hie.

Item 1-1

Plakhâlder ynhâld foar de scrollspy foarbyld. Dizze hat betrekking op it item 1-1. Jo hawwe de moaiste arsjitektuer. Paspoartstempels, se is kosmopolyt. Fijn, fris, fûl, wy krigen it op slot. Nea pland dat ik dy ien dei ferlieze soe. Se yt dyn hert út. Jo tút is kosmysk, elke beweging is magy. Ik bedoel de iene, ik bedoel as se de iene is. Groeten leafsten lit ús in reis nimme. Besit gewoan de nacht lykas de 4e july! Mar jo wolle leaver fergriemd wurde.

Item 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

Plakhâlder ynhâld foar de scrollspy foarbyld. Dizze hat betrekking op item 3-2. Jo binne orizjineel, kin net ferfongen wurde. De hiele nacht spylje se, dyn liet. Kalifornje famkes wy binne net te bestriden. As in fûgel sûnder hok. Der is no gjin eangst, lit gean en wês gewoan frij, ik sil fan dy hâlde sûnder betingst. Ik kin it skriuwen oan 'e muorre sjen. Jo kinne de wrâld reizgje, mar neat komt tichtby de gouden kust.

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

Foarbyld mei list-groep

Scrollspy wurket ek mei .list-groups. Rôlje it gebiet neist de listgroep en besjoch de aktive klasseferoaring.

Artikel 1

Plakhâlder-ynhâld foar it foarbyld fan 'e scrollspy-listgroep. Dizze hat betrekking op item 1. Jo hawwe gjin ekskús nedich. Der is no gjin eangst, lit gean en wês gewoan frij, ik sil fan dy hâlde sûnder betingst. Ofrûne freedtejûn. Wês net in ferlegen kinda guy Ik sil wedzjen dat it is moai. Simmer nei middelbere skoalle doe't wy earst moete. Want sy is de muze en de keunstner. Wat? Wachtsje. Tocht dat ik de útsûndering wie.

Artikel 2

Plakhâlder-ynhâld foar it foarbyld fan 'e scrollspy-listgroep. Dizze hat te krijen mei item 2. Ja, se dûnset op har eigen beat. Och, nee. Jo koenen de grutste wêze. Want, poppe, do bist in fjoerwurk. Miskien in reden wêrom't alle doarren ticht binne. Iepenje jo hert en lit it gewoan begjinne. Sa très chic, ja, se is in klassiker.

Artikel 3

Plakhâlder-ynhâld foar it foarbyld fan 'e scrollspy-listgroep. Dizze hat te krijen mei item 3. Wy geane heger en heger. Nea it iene sûnder it oare, wy makken in pakt. Ik rin op 'e loft. Immen sei dat jo jo tattoo fuortsmiten hiene. No sweef ik as in flinter. Toan, tan fit en klear, draai it omheech want it wurdt swier. Want as jo ienris fan my binne, ienris fan my. Jo gewoan gotta ignite it ljocht en lit it skine! Sa rieden wy de boulevard oan. Fielst dy wolris, fielst sa papiertin. Ik sjoch it allegear, ik sjoch it no.

Artikel 4

Plakhâlder-ynhâld foar it foarbyld fan 'e scrollspy-listgroep. Dizze hat betrekking op item 4. Simmer nei middelbere skoalle doe't wy earst moete. Der is no gjin eangst, lit gean en wês gewoan frij, ik sil fan dy hâlde sûnder betingst. Sinne-tute hûd sa hyt wy sille smelte dyn popsicle. Dizze leafde sil jo sweve meitsje.

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

Gebrûk

Fia data attributen

Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje data-spy="scroll"jo ta oan it elemint wêrop jo wolle bispiede (meast typysk soe dit de <body>). Foegje dan it data-targetattribút ta mei de ID of klasse fan it âlderelemint fan elke Bootstrap .nav-komponint.

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>

Fia JavaScript

Nei it tafoegjen position: relative;fan jo CSS, skilje de scrollspy fia JavaScript:

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

Oplosbere ID-doelen nedich

Navbar-keppelings moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e DOM lykas <div id="home"></div>.

Net- doeleleminten :visiblenegearre

Doel eleminten dy't net :visibleneffens jQuery sille wurde negearre en harren byhearrende nav items sille nea wurde markearre.

Metoaden

.scrollspy('refresh')

By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:

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

.scrollspy('dispose')

Ferneatiget in elemint syn scrollspy.

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset="".

Namme Type Standert Beskriuwing
offset nûmer 10 Pixels om fan boppen ôf te kompensearjen by it berekkenjen fan posysje fan scroll.
metoade string auto Fynt yn hokker seksje it bispiede elemint is. autosil de bêste metoade kieze om rôlkoordinaten te krijen. offsetsil jQuery-offsetmetoade brûke om scroll-koördinaten te krijen. positionsil brûke jQuery posysje metoade te krijen scroll koördinaten.
doel string | jQuery objekt | DOM elemint Spesifiseart elemint om Scrollspy-plugin oan te passen.

Eveneminten

Event Type Beskriuwing
activate.bs.scrollspy Dit barren ûntspringt op it rôl-elemint as in nij item wurdt aktivearre troch de scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})