in English

Scrollspy

Dateer Bootstrap-navigasie of lys groepkomponente outomaties op gebaseer op rolposisie om aan te dui watter skakel tans aktief is in die viewport.

Hoe dit werk

Scrollspy het 'n paar vereistes om behoorlik te funksioneer:

  • As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .
  • Dit moet op 'n Bootstrap nav-komponent of lysgroep gebruik word .
  • Scrollspy vereis position: relative;op die element waarop jy spioeneer, gewoonlik die <body>.
  • Wanneer u op ander elemente as die spioeneer <body>, maak seker dat u 'n heightstel het en overflow-y: scroll;toegepas het.
  • Ankers ( <a>) word vereis en moet na 'n element daarmee wys id.

Wanneer dit suksesvol geïmplementeer is, sal jou navigasie- of lysgroep dienooreenkomstig opdateer en die .activeklas van een item na die volgende skuif op grond van hul verwante teikens.

Voorbeeld in navbar

Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-items sal ook uitgelig word.

@vet

Plekhouer-inhoud vir die scrollspy-voorbeeld. Jy het die beste argitektuur. Paspoortstempels, sy is kosmopolities. Goed, vars, fel, ons het dit op slot gekry. Nooit beplan dat ek jou eendag sal verloor nie. Sy eet jou hart uit. Jou soen is kosmies, elke beweging is magie. Ek bedoel die ene, ek bedoel asof sy die een is. Groete geliefdes kom ons neem 'n reis. Besit net die nag soos die 4de Julie! Maar jy sal eerder vermors word.

@mdo

Plekhouer-inhoud vir die scrollspy-voorbeeld. Want sy is die muse en die kunstenaar. (Dit is hoe ons doen) So jy wil met magie speel. Wees dus net seker voor jy dit alles vir my gee. Ek loop, ek loop op lug (vanaand). Slaan die praatjie oor, het alles gehoor, tyd om te stap.

een

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

Plekhouer-inhoud vir die scrollspy-voorbeeld. As jy wil dans, as jy alles wil hê, weet jy dat ek die meisie is wat jy moet bel. Loop deur die storm ek sou. So laat ek jou in jou verjaarsdagpak kry. Die een wat weggekom het. Verlede Vrydagaand, ja, ek dink ons ​​het die wet oortree, sê altyd ons gaan stop. Want sy is 'n bietjie van Yoko, En sy is 'n bietjie van 'O nee'. Ek wil hê die kakebeen laat sak, die oog spring, die kop draai, die liggaam skok. Ja, ons het ons kredietkaarte gemaksimeer en is uit die kroeg geskop.

En 'n bietjie meer plekhouer-inhoud, vir goeie maatreël.

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

Voorbeeld met geneste nav

Scrollspy werk ook met geneste .navs. As 'n geneste .navis .active, sal sy ouers ook wees .active. Blaai deur die area langs die navigasiebalk en kyk hoe die aktiewe klas verander.

Item 1

Plekhouer-inhoud vir die scrollspy-voorbeeld. Hierdie een hou verband met item 1. Neem jou kilometers hoog, so hoog, want sy het daardie een internasionale glimlag. Daar is 'n vreemdeling in my bed, daar is 'n dreuning in my kop. O, nee. In 'n ander lewe sou ek jou laat bly. Want ek, ek is tot enigiets in staat. Geskik vir my kroonstryd. Word gebruik om jou ouers se drank te steel en op die dak te klim. Toon, bruin fiks en gereed, draai dit op want dit word swaar. Haar liefde is soos 'n dwelm. Ek dink ek het vergeet ek het 'n keuse.

Item 1-1

Plekhouer-inhoud vir die scrollspy-voorbeeld. Hierdie een hou verband met item 1-1. Jy het die beste argitektuur. Paspoortstempels, sy is kosmopolities. Goed, vars, fel, ons het dit op slot gekry. Nooit beplan dat ek jou eendag sal verloor nie. Sy eet jou hart uit. Jou soen is kosmies, elke beweging is magie. Ek bedoel die ene, ek bedoel asof sy die een is. Groete geliefdes kom ons neem 'n reis. Besit net die nag soos die 4de Julie! Maar jy sal eerder vermors word.

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

Plekhouer-inhoud vir die scrollspy-voorbeeld. Hierdie een hou verband met item 3-2. Jy is oorspronklik, kan nie vervang word nie. Die hele nag speel hulle, jou liedjie. Kalifornië meisies ons is onmiskenbaar. Soos 'n voël sonder 'n hok. Daar is nou geen vrees nie, laat gaan en wees net vry, ek sal jou onvoorwaardelik liefhê. Ek kan die skrif aan die muur sien. Jy kan die wêreld deurreis, maar niks kom naby die goue kus nie.

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

Voorbeeld met lys-groep

Scrollspy werk ook met .list-groups. Blaai deur die area langs die lysgroep en kyk hoe die aktiewe klas verander.

Item 1

Plekhouer-inhoud vir die scrollspy lys-groep voorbeeld. Hierdie een hou verband met item 1. Het nie verskonings nodig nie. Daar is nou geen vrees nie, laat gaan en wees net vry, ek sal jou onvoorwaardelik liefhê. Verlede Vrydagaand. Moenie 'n skaam ou wees nie, ek wed dit is pragtig. Somer na hoërskool toe ons die eerste keer ontmoet het. Want sy is die muse en die kunstenaar. Wat? Wag. Gedink dat ek die uitsondering is.

Item 2

Plekhouer-inhoud vir die scrollspy lys-groep voorbeeld. Hierdie een hou verband met item 2. Ja, sy dans op haar eie maat. O, nee. Jy kon die grootste gewees het. Want, skat, jy is 'n vuurwerk. Dalk 'n rede hoekom al die deure toe is. Maak jou hart oop en laat dit net begin. So tres chic, ja, sy is 'n klassieke.

Item 3

Plekhouer-inhoud vir die scrollspy lys-groep voorbeeld. Hierdie een hou verband met item 3. Ons gaan hoër en hoër. Nooit die een sonder die ander nie, ons het 'n ooreenkoms gesluit. Ek loop op die lug. Iemand het gesê dat jy jou tatoeëermerk laat verwyder het. Nou sweef ek soos 'n skoenlapper. Toon, bruin fiks en gereed, draai dit op want dit word swaar. Want sodra jy myne is, is jy eers myne. Jy moet net die lig aansteek en dit laat skyn! So het ons die boulevard aangetref. Voel jy ooit, voel so papierdun. Ek sien dit alles, ek sien dit nou.

Item 4

Plekhouer-inhoud vir die scrollspy lys-groep voorbeeld. Hierdie een hou verband met item 4. Somer na hoërskool toe ons die eerste keer ontmoet het. Daar is nou geen vrees nie, laat gaan en wees net vry, ek sal jou onvoorwaardelik liefhê. Son-gesoen vel so warm ons sal jou popsicle smelt. Hierdie liefde sal jou laat sweef.

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

Gebruik

Via data-eienskappe

Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg data-spy="scroll"by die element waarop jy wil spioeneer (meestal sal dit die <body>). Voeg dan die data-targetkenmerk by met die ID of klas van die ouerelement van enige Bootstrap- .navkomponent.

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>

Via JavaScript

Nadat u position: relative;u CSS bygevoeg het, skakel die scrollspy via JavaScript:

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

Oplosbare ID-teikens word vereis

Navbar-skakels moet oplosbare ID-teikens hê. Byvoorbeeld, 'n <a href="#home">home</a>moet ooreenstem met iets in die DOM soos <div id="home"></div>.

Nie :visible-teikenelemente geïgnoreer

Teikenelemente wat nie :visiblevolgens jQuery is nie , sal geïgnoreer word en hul ooreenstemmende navigasie-items sal nooit uitgelig word nie.

Metodes

.scrollspy('refresh')

Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:

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

.scrollspy('dispose')

Vernietig 'n element se scrollspy.

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".

Naam Tik Verstek Beskrywing
verreken nommer 10 Pixels om van bo af te verreken wanneer die posisie van rolberekening bereken word.
metode string outo Vind in watter afdeling die gespioeneerde element is. autosal die beste metode kies om rolkoördinate te kry. offsetsal jQuery offset metode gebruik om rolkoördinate te kry. positionsal jQuery posisie metode gebruik om rolkoördinate te kry.
teiken tou | jQuery voorwerp | DOM element Spesifiseer element om Scrollspy-inprop toe te pas.

Gebeurtenisse

Soort gebeurtenis Beskrywing
aktiveer.bs.scrollspy Hierdie gebeurtenis brand op die rolelement wanneer 'n nuwe item deur die rolspioen geaktiveer word. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})