in English

Scrollspy

Uppdatera Bootstrap-navigering eller listgruppskomponenter automatiskt baserat på rullningsposition för att indikera vilken länk som för närvarande är aktiv i visningsporten.

Hur det fungerar

Scrollspy har några krav för att fungera korrekt:

  • Om du bygger vårt JavaScript från källan kräverutil.js det .
  • Den måste användas på en Bootstrap nav-komponent eller listgrupp .
  • Scrollspy kräver position: relative;på elementet du spionerar på, vanligtvis <body>.
  • När du spionerar på andra element än <body>, se till att ha en heightuppsättning och overflow-y: scroll;tillämpad.
  • Ankare ( <a>) krävs och måste peka på ett element med det id.

När den har implementerats framgångsrikt kommer din nav- eller listgrupp att uppdateras i enlighet med detta och flytta .activeklassen från ett objekt till nästa baserat på deras associerade mål.

Exempel i navbar

Bläddra i området under navigeringsfältet och se hur den aktiva klassen ändras. Alternativen i rullgardinsmenyn kommer också att markeras.

@fett

Platshållarinnehåll för scrollspy-exemplet. Du har den finaste arkitekturen. Passstämplar, hon är kosmopolitisk. Fint, fräscht, häftigt, vi fick det på lås. Har aldrig planerat att jag en dag skulle förlora dig. Hon äter upp ditt hjärta. Din kyss är kosmisk, varje rörelse är magi. Jag menar de, jag menar som om hon är den. Hälsningar nära och kära låt oss ta en resa. Bara äga natten som den 4 juli! Men du vill hellre bli bortkastad.

@mdo

Platshållarinnehåll för scrollspy-exemplet. För hon är musan och konstnären. (Så här gör vi) Så du vill leka med magi. Så var bara säker innan du ger allt till mig. Jag går, jag går på luft (ikväll). Hoppa över snacket, hörde allt, dags att gå promenaden.

ett

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

Platshållarinnehåll för scrollspy-exemplet. Om du vill dansa, om du vill ha allt, så vet du att jag är tjejen du borde kalla. Jag skulle gå igenom stormen. Så låt mig få dig i din födelsedagskostym. Den som kom undan. I fredags kväll, ja, jag tror att vi bröt mot lagen, säger alltid att vi ska sluta. För hon är lite av Yoko, Och hon är lite av "Åh nej". Jag vill att käken tappar, ögat slår, huvudet vänder, kroppen chockar. Ja, vi maxade våra kreditkort och blev utslängda från baren.

Och lite mer platshållarinnehåll, för gott skull.

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

Exempel med kapslad nav

Scrollspy fungerar också med kapslade .navs. Om en kapslad .navär .activekommer dess föräldrar också att vara .active. Bläddra i området bredvid navigeringsfältet och se hur den aktiva klassen ändras.

Punkt 1

Platshållarinnehåll för scrollspy-exemplet. Den här relaterar till punkt 1. Tar dig mil högt, så högt, för hon har det där internationella leendet. Det ligger en främling i min säng, det bultar i mitt huvud. Å nej. I ett annat liv skulle jag få dig att stanna. För jag är kapabel till vad som helst. Passar för min krona strid. Används för att stjäla dina föräldrars sprit och klättra upp på taket. Ton, solbränd passform och klar, vrid upp den för den blir tung. Hennes kärlek är som en drog. Jag antar att jag glömde att jag hade ett val.

Punkt 1-1

Platshållarinnehåll för scrollspy-exemplet. Den här hänför sig till punkten 1-1. Du har den finaste arkitekturen. Passstämplar, hon är kosmopolitisk. Fint, fräscht, häftigt, vi fick det på lås. Har aldrig planerat att jag en dag skulle förlora dig. Hon äter upp ditt hjärta. Din kyss är kosmisk, varje rörelse är magi. Jag menar de, jag menar som om hon är den. Hälsningar nära och kära låt oss ta en resa. Bara äga natten som den 4 juli! Men du vill hellre bli bortkastad.

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

Platshållarinnehåll för scrollspy-exemplet. Denna hänför sig till punkt 3-2. Du är original, kan inte ersättas. Hela natten spelar de, din sång. Kalifornien flickor vi är obestridliga. Som en fågel utan bur. Det finns ingen rädsla nu, släpp taget och var bara fri, jag kommer att älska dig villkorslöst. Jag kan se skriften på väggen. Du kan resa jorden runt men ingenting kommer i närheten av den gyllene kusten.

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

Exempel med list-grupp

Scrollspy fungerar också med .list-groups. Bläddra i området bredvid listgruppen och se hur den aktiva klassen ändras.

Punkt 1

Platshållarinnehåll för exemplet med scrollspy listgrupp. Den här gäller punkt 1. Behöver inte be om ursäkt. Det finns ingen rädsla nu, släpp taget och var bara fri, jag kommer att älska dig villkorslöst. Förra fredagskvällen. Var inte en blyg typ, jag slår vad om att den är vacker. Sommar efter gymnasiet när vi träffades första gången. För hon är musan och konstnären. Vad? Vänta. Trodde att jag var undantaget.

Punkt 2

Platshållarinnehåll för exemplet med scrollspy listgrupp. Den här relaterar till punkt 2. Ja, hon dansar till sin egen takt. Å nej. Du kunde ha varit störst. För, älskling, du är ett fyrverkeri. Kanske en anledning till att alla dörrar är stängda. Öppna upp ditt hjärta och låt det börja. Så très chic, ja, hon är en klassiker.

Punkt 3

Platshållarinnehåll för exemplet med scrollspy listgrupp. Den här hänför sig till punkt 3. Vi går högre och högre. Aldrig det ena utan det andra, vi slöt en pakt. Jag går på luft. Någon sa att du hade tagit bort din tatuering. Nu svävar jag som en fjäril. Ton, solbränd passform och klar, vrid upp den för den blir tung. För när du är min, en gång är du min. Du måste bara tända ljuset och låta det lysa! Så vi åkte till boulevarden. Känner du dig någonsin så papperstunt. Jag ser allt, jag ser det nu.

Punkt 4

Platshållarinnehåll för exemplet med scrollspy listgrupp. Den här relaterar till punkt 4. Sommaren efter gymnasiet när vi träffades första gången. Det finns ingen rädsla nu, släpp taget och var bara fri, jag kommer att älska dig villkorslöst. Solkysst hud så varm att vi smälter din popsicle. Denna kärlek kommer att få dig att sväva.

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

Användande

Via dataattribut

För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg data-spy="scroll"till elementet du vill spionera på (vanligtvis skulle detta vara <body>). Lägg sedan till data-targetattributet med ID eller klass för det överordnade elementet för någon 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 att ha lagt position: relative;till din CSS, ring scrollspy via JavaScript:

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

Lösbara ID-mål krävs

Navbar-länkar måste ha lösbara id-mål. Till exempel måste ett <a href="#home">home</a>måste motsvara något i DOM som <div id="home"></div>.

Icke- målelement :visibleignoreras

Målelement som inte är :visibleenligt jQuery kommer att ignoreras och deras motsvarande nav-objekt kommer aldrig att markeras.

Metoder

.scrollspy('refresh')

När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:

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

.scrollspy('dispose')

Förstör ett elements scrollspy.

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-offset="".

namn Typ Standard Beskrivning
offset siffra 10 Pixlar att förskjuta från toppen vid beräkning av rullningsposition.
metod sträng bil Hittar vilken sektion det spionerade elementet är i. autokommer att välja den bästa metoden för att få rullningskoordinater. offsetkommer att använda jQuery offset-metoden för att få scrollkoordinater. positionkommer att använda jQuery positionsmetoden för att få scrollkoordinater.
mål sträng | jQuery-objekt | DOM-element Anger element för att tillämpa Scrollspy-plugin.

evenemang

Event typ Beskrivning
activate.bs.scrollspy Den här händelsen utlöses på rullningselementet när ett nytt objekt aktiveras av scrollspionen. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})