in English

Scrollspy

Opdater automatisk Bootstrap-navigation eller listegruppekomponenter baseret på rulleposition for at angive, hvilket link der i øjeblikket er aktivt i visningsporten.

Hvordan det virker

Scrollspy har et par krav for at fungere korrekt:

  • Hvis du bygger vores JavaScript fra kilden, kræverutil.js det .
  • Det skal bruges på en Bootstrap nav-komponent eller listegruppe .
  • Scrollspy kræver position: relative;det element, du spionerer på, normalt <body>.
  • Når du spionerer på andre elementer end <body>, skal du sørge for at have et heightsæt og overflow-y: scroll;anvendt.
  • Ankre ( <a>) er påkrævet og skal pege på et element med det id.

Når den er implementeret, opdateres din nav- eller listegruppe i overensstemmelse hermed og flytter .activeklassen fra det ene element til det næste baseret på deres tilknyttede mål.

Eksempel i navbar

Rul gennem området under navigeringslinjen, og se den aktive klasse ændre sig. Rullemenupunkterne vil også blive fremhævet.

@fed

Pladsholderindhold til scrollspy-eksemplet. Du har den fineste arkitektur. Passtempler, hun er kosmopolitisk. Fint, friskt, voldsomt, vi fik det på lås. Har aldrig planlagt, at jeg en dag ville miste dig. Hun æder dit hjerte ud. Dit kys er kosmisk, hver bevægelse er magi. Jeg mener dem, jeg mener som om hun er den ene. Hilsen kære lad os tage en rejse. Bare ejer natten som den 4. juli! Men du vil hellere gå til spilde.

@mdo

Pladsholderindhold til scrollspy-eksemplet. For hun er musen og kunstneren. (Sådan gør vi) Så du vil lege med magi. Så vær bare sikker, før du giver det hele til mig. Jeg går, jeg går på luft (i aften). Spring over snakken, hørte det hele, tid til at 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

Pladsholderindhold til scrollspy-eksemplet. Hvis du vil danse, hvis du vil det hele, ved du, at jeg er den pige, du skal kalde. Jeg ville gå gennem stormen. Så lad mig få dig i dit fødselsdagsdragt. Den der slap væk. Sidste fredag ​​aften, ja, jeg tror, ​​vi brød loven, siger altid, at vi stopper. Fordi hun er en lille smule Yoko, og hun er en lille smule 'Åh nej'. Jeg vil have, at kæben falder, øjet springer, hovedet vender, kroppen chokerer. Ja, vi maxede vores kreditkort og blev smidt ud af baren.

Og noget mere pladsholderindhold, for en 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 indlejret nav

Scrollspy fungerer også med indlejrede .navs. Hvis en indlejret .naver .active, vil dens forældre også være .active. Rul gennem området ved siden af ​​navigeringslinjen, og se den aktive klasse ændre sig.

Punkt 1

Pladsholderindhold til scrollspy-eksemplet. Denne relaterer til punkt 1. Tager dig miles højt, så højt, fordi hun har det ene internationale smil. Der er en fremmed i min seng, der banker i mit hoved. Åh nej. I et andet liv ville jeg få dig til at blive. For jeg er i stand til alt. Passer op til min kronekamp. Bruges til at stjæle dine forældres spiritus og klatre op på taget. Tone, solbrun pasform og klar, skru op for den bliver tung. Hendes kærlighed er som et stof. Jeg har vist glemt, at jeg havde et valg.

Punkt 1-1

Pladsholderindhold til scrollspy-eksemplet. Denne vedrører punkt 1-1. Du har den fineste arkitektur. Passtempler, hun er kosmopolitisk. Fint, friskt, voldsomt, vi fik det på lås. Har aldrig planlagt, at jeg en dag ville miste dig. Hun æder dit hjerte ud. Dit kys er kosmisk, hver bevægelse er magi. Jeg mener dem, jeg mener som om hun er den ene. Hilsen kære lad os tage en rejse. Bare ejer natten som den 4. juli! Men du vil hellere gå til spilde.

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

Pladsholderindhold til scrollspy-eksemplet. Denne vedrører punkt 3-2. Du er original, kan ikke erstattes. Hele natten spiller de, din sang. Californiske piger, vi er ubestridelige. Som en fugl uden bur. Der er ingen frygt nu, slip og vær bare fri, jeg vil elske dig betingelsesløst. Jeg kan se skriften på væggen. Du kan rejse verden rundt, men intet kommer tæt på den gyldne kyst.

<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. Rul i området ved siden af ​​listegruppen, og se den aktive klasse ændre sig.

Punkt 1

Pladsholderindhold for scrollspy-listegruppeeksemplet. Denne vedrører punkt 1. Behøver ikke undskyldninger. Der er ingen frygt nu, slip og vær bare fri, jeg vil elske dig betingelsesløst. Sidste fredag ​​aften. Vær ikke en genert fyr, jeg vil vædde på, at den er smuk. Sommer efter gymnasiet, da vi mødtes første gang. For hun er musen og kunstneren. Hvad? Vente. Troede, at jeg var undtagelsen.

Punkt 2

Pladsholderindhold for scrollspy-listegruppeeksemplet. Denne vedrører punkt 2. Ja, hun danser til sit eget beat. Åh nej. Du kunne have været den største. For, skat, du er et fyrværkeri. Måske en grund til, at alle døre er lukkede. Åbn dit hjerte og lad det bare begynde. Så très chic, ja, hun er en klassiker.

Punkt 3

Pladsholderindhold for scrollspy-listegruppeeksemplet. Denne vedrører punkt 3. Vi går højere og højere. Aldrig det ene uden det andet, vi lavede en pagt. Jeg går i luften. Nogen sagde, du fik fjernet din tatovering. Nu svæver jeg som en sommerfugl. Tone, solbrun pasform og klar, skru op for den bliver tung. For når du først er min, så er du min. Du skal bare tænde lyset og lade det skinne! Så vi ramte boulevarden. Føler du dig nogensinde så papirtynd. Jeg ser det hele, jeg ser det nu.

Punkt 4

Pladsholderindhold for scrollspy-listegruppeeksemplet. Denne vedrører punkt 4. Sommer efter gymnasiet, da vi mødtes første gang. Der er ingen frygt nu, slip og vær bare fri, jeg vil elske dig betingelsesløst. Solkysset hud så varm, at vi smelter din ispind. Denne kærlighed vil få dig til at svæve.

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

Brug

Via dataattributter

For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du tilføje data-spy="scroll"til det element, du vil spionere på (det vil oftest være <body>). Tilføj derefter data-targetattributten med ID'et eller klassen for det overordnede element for enhver 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

Efter at have tilføjet position: relative;din CSS, ring til scrollspy via JavaScript:

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

Opløselige ID-mål påkrævet

Navbar-links skal have opløselige id-mål. For eksempel skal et <a href="#home">home</a>svar svare til noget i DOM som <div id="home"></div>.

Ikke- :visiblemålelementer ignoreret

Målelementer, der ikke er i :visiblehenhold til jQuery , vil blive ignoreret, og deres tilsvarende nav-elementer vil aldrig blive fremhævet.

Metoder

.scrollspy('refresh')

Når du bruger scrollspy i forbindelse med tilføjelse eller fjernelse af elementer fra DOM, skal du kalde opdateringsmetoden sådan:

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

.scrollspy('dispose')

Ødelægger et elements scrollspy.

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-offset="".

Navn Type Standard Beskrivelse
offset nummer 10 Pixels til forskydning fra toppen ved beregning af rulleposition.
metode snor auto Finder hvilken sektion det spionerede element er i. autovil vælge den bedste metode til at få scroll-koordinater. offsetvil bruge jQuery offset-metoden til at få rullekoordinater. positionvil bruge jQuery position metode til at få scroll koordinater.
mål streng | jQuery objekt | DOM element Angiver element til at anvende Scrollspy plugin.

Begivenheder

Begivenhedstype Beskrivelse
activate.bs.scrollspy Denne hændelse udløses på rulleelementet, når et nyt element bliver aktiveret af scrollspyen. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})