in English

Scrollspy

Oppdater Bootstrap-navigasjons- eller listegruppekomponenter automatisk basert på rulleposisjon for å indikere hvilken kobling som for øyeblikket er aktiv i visningsporten.

Hvordan det fungerer

Scrollspy har noen krav for å fungere ordentlig:

Hvis du bygger JavaScript fra kilden, kreverutil.js det .
Den må brukes på en Bootstrap nav-komponent eller listegruppe .
Scrollspy krever position: relative;på elementet du spionerer på, vanligvis <body>.
Når du spionerer på andre elementer enn <body>, sørg for å ha et heightsett og overflow-y: scroll;brukt.
Ankere ( <a>) er påkrevd og må peke til et element med det id.

Når den er implementert, vil nav- eller listegruppen din oppdateres tilsvarende, og flytte .activeklassen fra ett element til det neste basert på deres tilknyttede mål.

Rull området under navigasjonslinjen og se den aktive klassen endre seg. Rullegardinelementene vil også bli uthevet.

@fett

Plassholderinnhold for scrollspy-eksemplet. Du har den fineste arkitekturen. Passstempler, hun er kosmopolitisk. Fint, friskt, heftig, vi fikk det på lås. Har aldri planlagt at jeg en dag skulle miste deg. Hun spiser opp hjertet ditt. Kysset ditt er kosmisk, hver bevegelse er magi. Jeg mener de, jeg mener som om hun er den. Hilsen kjære, la oss ta en reise. Bare eier natten som den 4. juli! Men du vil heller bli bortkastet.

@mdo

Plassholderinnhold for scrollspy-eksemplet. For hun er musen og artisten. (Slik gjør vi) Så du vil leke med magi. Så bare vær sikker før du gir alt til meg. Jeg går, jeg går på lufta (i kveld). Hopp over praten, hørt alt, tid til å gå turen.

en

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

Plassholderinnhold for scrollspy-eksemplet. Hvis du vil danse, hvis du vil ha alt, vet du at jeg er jenta du bør kalle. Gå gjennom stormen jeg ville. Så la meg få deg i bursdagsdressen din. Den som slapp unna. Sist fredag kveld, ja, jeg tror vi brøt loven, sier alltid at vi skal slutte. Fordi hun er en liten bit av Yoko, og hun er en liten bit av "Å nei". Jeg vil ha kjeven fallin', eye poppin', head turnin', body shockin'. Ja, vi makserte kredittkortene våre og ble kastet ut av baren.

Og litt mer plassholderinnhold, for god ordens skyld.

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

Eksempel med nestet nav

Scrollspy fungerer også med nestede .navs. Hvis en nestet .naver .active, vil foreldrene også være .active. Rull området ved siden av navigasjonslinjen og se den aktive klassen endre seg.

Vare 1

Plassholderinnhold for scrollspy-eksemplet. Denne er relatert til punkt 1. Tar deg milevis høyt, så høyt, fordi hun har det ene internasjonale smilet. Det er en fremmed i sengen min, det banker i hodet mitt. Å nei. I et annet liv ville jeg få deg til å bli. Fordi jeg, jeg er i stand til alt. Egner seg til min kronekamp. Brukes til å stjele dine foreldres brennevin og klatre opp på taket. Tone, solbrun passform og klar, skru den opp fordi den blir tung. Hennes kjærlighet er som et stoff. Jeg antar at jeg glemte at jeg hadde et valg.

Punkt 1-1

Plassholderinnhold for scrollspy-eksemplet. Denne gjelder punkt 1-1. Du har den fineste arkitekturen. Passstempler, hun er kosmopolitisk. Fint, friskt, heftig, vi fikk det på lås. Har aldri planlagt at jeg en dag skulle miste deg. Hun spiser opp hjertet ditt. Kysset ditt er kosmisk, hver bevegelse er magi. Jeg mener de, jeg mener som om hun er den. Hilsen kjære, la oss ta en reise. Bare eier natten som den 4. juli! Men du vil heller bli bortkastet.

Punkt 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

Plassholderinnhold for scrollspy-eksemplet. Denne gjelder punkt 3-2. Du er original, kan ikke erstattes. Hele natten spiller de, sangen din. California jenter vi er ubestridelige. Som en fugl uten bur. Det er ingen frykt nå, gi slipp og bare vær fri, jeg vil elske deg betingelsesløst. Jeg kan se skriften på veggen. Du kan reise verden rundt, men ingenting kommer i nærheten av den gylne kysten.

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

Eksempel med liste-gruppe

Scrollspy fungerer også med .list-groups. Rull området ved siden av listegruppen og se den aktive klassen endre seg.

Vare 1 Punkt 2 Punkt 3 Punkt 4

Vare 1

Plassholderinnhold for scrollspy liste-gruppe eksempel. Denne gjelder punkt 1. Trenger ikke unnskyldninger. Det er ingen frykt nå, gi slipp og bare vær fri, jeg vil elske deg betingelsesløst. Sist fredag kveld. Ikke vær en sjenert fyr, jeg vedder på at den er vakker. Sommer etter videregående da vi møttes første gang. For hun er musen og artisten. Hva? Vente. Tenkte at jeg var unntaket.

Punkt 2

Plassholderinnhold for scrollspy liste-gruppe eksempel. Denne er relatert til punkt 2. Ja, hun danser til sin egen takt. Å nei. Du kunne vært den største. Fordi, baby, du er et fyrverkeri. Kanskje en grunn til at alle dørene er lukket. Åpne hjertet ditt og la det begynne. Så très chic, ja, hun er en klassiker.

Punkt 3

Plassholderinnhold for scrollspy liste-gruppe eksempel. Denne relaterer seg til punkt 3. Vi går høyere og høyere. Aldri den ene uten den andre, vi inngikk en pakt. Jeg går på lufta. Noen sa at du hadde fjernet tatoveringen din. Nå svever jeg som en sommerfugl. Tone, solbrun passform og klar, skru den opp fordi den blir tung. For når du er min, en gang er du min. Du må bare tenne lyset og la det skinne! Så vi traff bulevarden. Føler du deg noen gang så papirtynne. Jeg ser alt, jeg ser det nå.

Punkt 4

Plassholderinnhold for scrollspy liste-gruppe eksempel. Denne relaterer seg til punkt 4. Sommer etter videregående da vi først møttes. Det er ingen frykt nå, gi slipp og bare vær fri, jeg vil elske deg betingelsesløst. Solkysset hud så varm at vi smelter ispinden din. Denne kjærligheten vil få deg til å levitere.

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

Bruk

Via dataattributter

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-spy="scroll"til elementet du vil spionere på (vanligvis vil dette være <body>). Legg deretter til data-targetattributtet med IDen eller klassen til det overordnede elementet til en hvilken som helst 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

Etter å ha lagt position: relative;til CSS, ring scrollspy via JavaScript:

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

Løsbare ID-mål kreves

Navbar-lenker må ha løsbare id-mål. For eksempel <a href="#home">home</a>må en tilsvare noe i DOM som <div id="home"></div>.

Ikke- `:visible`målelementer ignorert

Målelementer som ikke er :visiblei henhold til jQuery vil bli ignorert og deres tilsvarende nav-elementer vil aldri bli uthevet.

Metoder

`.scrollspy('refresh')`

Når du bruker scrollspy i forbindelse med å legge til eller fjerne elementer fra DOM, må du kalle oppdateringsmetoden slik:

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

`.scrollspy('dispose')`

Ødelegger et elements rullespion.

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-offset="".

Navn	Type	Misligholde	Beskrivelse
offset	Antall	10	Piksler for å forskyve fra toppen ved beregning av rulleposisjon.
metode	streng	auto	Finner hvilken seksjon det spionerte elementet er i. `auto`vil velge den beste metoden for å få rullekoordinater. `offset`vil bruke jQuery offset-metoden for å få rullekoordinater. `position`vil bruke jQuery-posisjonsmetoden for å få rullekoordinater.
mål	streng \| jQuery objekt \| DOM-element		Spesifiserer element for å bruke Scrollspy-plugin.

arrangementer

Hendelsestype	Beskrivelse
activate.bs.scrollspy	Denne hendelsen utløses på rulleelementet hver gang et nytt element blir aktivert av scrollspionen.

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

Scrollspy

Hvordan det fungerer

Eksempel i navbar

@fett

@mdo

en

two

three

Eksempel med nestet nav

Vare 1

Punkt 1-1

Punkt 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Eksempel med liste-gruppe

Vare 1

Punkt 2

Punkt 3

Punkt 4

Bruk

Via dataattributter

Via JavaScript

Løsbare ID-mål kreves

Ikke- :visiblemålelementer ignorert

Metoder

.scrollspy('refresh')

.scrollspy('dispose')

Alternativer

arrangementer

Ikke- `:visible`målelementer ignorert

`.scrollspy('refresh')`

`.scrollspy('dispose')`