Scrollspy
Update automatisch Bootstrap-navigatie of lijstgroepcomponenten op basis van schuifpositie om aan te geven welke link momenteel actief is in de viewport.
Hoe het werkt
Scrollspy heeft een paar vereisten om goed te kunnen functioneren:
- Als u ons JavaScript vanaf de bron bouwt, is
util.js. - Het moet worden gebruikt op een Bootstrap - navigatiecomponent of lijstgroep .
- Scrollspy vereist
position: relative;op het element dat u bespioneert, meestal de<body>. - Wanneer u andere elementen dan de bespioneert
<body>, moet u ervoor zorgen dat u eenheightset hebt enoverflow-y: scroll;toegepast. - Ankers (
<a>) zijn verplicht en moeten verwijzen naar een element daarmeeid.
Als het succesvol is geïmplementeerd, wordt uw navigatie- of lijstgroep dienovereenkomstig bijgewerkt, waarbij de .activeklas van het ene item naar het volgende wordt verplaatst op basis van de bijbehorende doelen.
Voorbeeld in navbar
Scroll door het gebied onder de navigatiebalk en kijk hoe de actieve klas verandert. De dropdown-items worden ook gemarkeerd.
@dik
Tijdelijke inhoud voor het scrollspy-voorbeeld. Je hebt de mooiste architectuur. Paspoortzegels, ze is kosmopolitisch. Fijn, fris, fel, we hebben het op slot. Nooit gepland dat ik je op een dag zou verliezen. Ze eet je hart uit. Je kus is kosmisch, elke beweging is magisch. Ik bedoel die, ik bedoel alsof zij de ware is. Gegroet dierbaren laten we op reis gaan. Bezit gewoon de nacht zoals 4 juli! Maar je wordt liever verspild.
@mdo
Tijdelijke inhoud voor het scrollspy-voorbeeld. Omdat zij de muze en de kunstenaar is. (Dit is hoe we het doen) Dus je wilt met magie spelen. Dus wees er zeker van voordat je alles aan mij geeft. Ik loop, ik loop op lucht (vanavond). Sla het gesprek over, heb het allemaal gehoord, tijd om te wandelen.
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
Tijdelijke inhoud voor het scrollspy-voorbeeld. Als je wilt dansen, als je alles wilt, weet je dat ik het meisje ben dat je moet bellen. Door de storm lopen zou ik doen. Dus laat me je in je verjaardagskostuum brengen. Hij die ontkwam. Afgelopen vrijdagavond, ja, ik denk dat we de wet hebben overtreden, zeggen altijd dat we gaan stoppen. Omdat ze een beetje Yoko is, en een beetje 'Oh nee'. Ik wil de kaak droppin', eye poppin', head turnin', body shockin'. Ja, we hebben onze creditcards gemaximaliseerd en werden uit de bar gegooid.
En wat meer tijdelijke inhoud, voor de goede orde.
<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 navigatie
Scrollspy werkt ook met geneste .navs. Als een geneste .navis .active, zullen zijn ouders dat ook zijn .active. Scroll door het gebied naast de navigatiebalk en kijk hoe de actieve klas verandert.
Item 1
Tijdelijke inhoud voor het scrollspy-voorbeeld. Deze heeft betrekking op item 1. Brengt je mijlen hoog, zo hoog, want ze heeft die ene internationale glimlach. Er ligt een vreemdeling in mijn bed, er wordt gebonsd in mijn hoofd. Oh nee. In een ander leven zou ik je laten blijven. Want ik, ik ben tot alles in staat. Klaar voor mijn beslissende strijd. Gebruikt om de drank van je ouders te stelen en op het dak te klimmen. Toon, bruin, fit en klaar, zet het op want het wordt zwaar. Haar liefde is als een drug. Ik denk dat ik vergeten was dat ik een keuze had.
Artikel 1-1
Tijdelijke inhoud voor het scrollspy-voorbeeld. Deze heeft betrekking op het item 1-1. Je hebt de mooiste architectuur. Paspoortzegels, ze is kosmopolitisch. Fijn, fris, fel, we hebben het op slot. Nooit gepland dat ik je op een dag zou verliezen. Ze eet je hart uit. Je kus is kosmisch, elke beweging is magisch. Ik bedoel die, ik bedoel alsof zij de ware is. Gegroet dierbaren laten we op reis gaan. Bezit gewoon de nacht zoals 4 juli! Maar je wordt liever verspild.
Artikel 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
Tijdelijke inhoud voor het scrollspy-voorbeeld. Deze heeft betrekking op item 3-2. Je bent origineel, kan niet worden vervangen. De hele nacht spelen ze jouw liedje. Californische meisjes, we zijn onmiskenbaar. Als een vogel zonder kooi. Er is nu geen angst, laat los en wees gewoon vrij, ik zal onvoorwaardelijk van je houden. Ik zie de letters op de muur. Je zou de wereld rond kunnen reizen, maar niets komt in de buurt van 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>
Voorbeeld met lijstgroep
Scrollspy werkt ook met .list-groups. Blader door het gebied naast de lijstgroep en kijk hoe de actieve klas verandert.
Item 1
Tijdelijke inhoud voor het scrollspy-lijstgroepvoorbeeld. Deze heeft betrekking op item 1. Geen excuses nodig. Er is nu geen angst, laat los en wees gewoon vrij, ik zal onvoorwaardelijk van je houden. Afgelopen vrijdagavond. Wees niet verlegen, ik durf te wedden dat het mooi is. Zomer na de middelbare school toen we elkaar voor het eerst ontmoetten. Omdat zij de muze en de kunstenaar is. Wat? Wacht. Dacht dat ik de uitzondering was.
Artikel 2
Tijdelijke inhoud voor het scrollspy-lijstgroepvoorbeeld. Deze heeft betrekking op item 2. Ja, ze danst op haar eigen ritme. Oh nee. Je had de beste kunnen zijn. Want, schat, je bent een vuurwerk. Misschien een reden waarom alle deuren gesloten zijn. Open je hart en laat het gewoon beginnen. Dus très chic, ja, ze is een klassieker.
Artikel 3
Tijdelijke inhoud voor het scrollspy-lijstgroepvoorbeeld. Deze heeft betrekking op item 3. We gaan hoger en hoger. Nooit het een zonder het ander, we sloten een pact. Ik loop op lucht. Iemand zei dat je je tatoeage had laten verwijderen. Nu ben ik aan het zweven als een vlinder. Toon, bruin, fit en klaar, zet het op want het wordt zwaar. Want als je eenmaal van mij bent, ben je eenmaal van mij. Je hoeft alleen maar het licht aan te steken en het te laten schijnen! Dus gingen we de boulevard op. Voel je je ooit zo flinterdun. Ik zie het allemaal, ik zie het nu.
Artikel 4
Tijdelijke inhoud voor het scrollspy-lijstgroepvoorbeeld. Deze heeft betrekking op item 4. Zomer na de middelbare school toen we elkaar voor het eerst ontmoetten. Er is nu geen angst, laat los en wees gewoon vrij, ik zal onvoorwaardelijk van je houden. Zonovergoten huid zo heet dat je ijslolly smelt. Deze liefde zal je laten zweven.
<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 gegevensattributen
Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt u toe data-spy="scroll"aan het element dat u wilt bespioneren (meestal is dit de <body>). Voeg vervolgens het data-targetkenmerk toe met de ID of klasse van het bovenliggende element van een Bootstrap- .navcomponent.
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
Na het toevoegen position: relative;van uw CSS, roept u de scrollspy op via JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
Oplosbare ID-doelen vereist
Navbar-links moeten oplosbare id-doelen hebben. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de DOM zoals <div id="home"></div>.
Niet :visible-doelelementen genegeerd
Doelelementen die niet :visiblevolgens jQuery zijn, worden genegeerd en de bijbehorende navigatie-items worden nooit gemarkeerd.
Methoden:
.scrollspy('refresh')
Wanneer u scrollspy gebruikt in combinatie met het toevoegen of verwijderen van elementen uit de DOM, moet u de vernieuwingsmethode als volgt aanroepen:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Vernietigt de scrollspy van een element.
Opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset="".
| Naam | Type | Standaard | Beschrijving |
|---|---|---|---|
| offset | nummer | 10 | Pixels die vanaf de bovenkant moeten worden verschoven bij het berekenen van de scrollpositie. |
| methode | snaar | auto | Vindt in welke sectie het bespioneerde element zich bevindt. autozal de beste methode kiezen om schuifcoördinaten te krijgen. offsetzal de jQuery-offsetmethode gebruiken om schuifcoördinaten te krijgen. positionzal de jQuery-positiemethode gebruiken om schuifcoördinaten te krijgen. |
| doelwit | tekenreeks | jQuery-object | DOM-element | Specificeert het element om de Scrollspy-plug-in toe te passen. |
Evenementen
| Evenementtype | Beschrijving |
|---|---|
| activeer.bs.scrollspy | Deze gebeurtenis wordt geactiveerd op het scroll-element wanneer een nieuw item wordt geactiveerd door de scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})