Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
De Scrollspy-plug-in wordt gebruikt om links in een navigatielijst automatisch bij te werken op basis van de schuifpositie.
Voor een tutorial over Scrollspy, lees onze Bootstrap Scrollspy Tutorial .
Tip: De Scrollspy-plug-in wordt vaak samen met de Affix -plug-in gebruikt.
Via data-* Attributen
Voeg toe data-spy="scroll"aan het element dat moet worden gebruikt als het schuifbare gebied (vaak is dit het <body>element).
Voeg vervolgens het data-targetattribuut toe met een waarde van de id of de klassenaam van de navigatiebalk ( .navbar). Dit is om ervoor te zorgen dat de navigatiebalk is verbonden met het schuifbare gebied.
Merk op dat schuifbare elementen moeten overeenkomen met de ID van de links in de lijstitems van de navigatiebalk ( <div id="section1">wedstrijden <a href="#section1">).
Het optionele data-offsetattribuut specificeert het aantal pixels dat vanaf de bovenkant moet worden verschoven bij het berekenen van de schuifpositie. Dit is handig wanneer u denkt dat de links in de navigatiebalk de actieve status te vroeg of te vroeg veranderen wanneer u naar de schuifbare elementen springt. Standaard is 10 pixels.
Vereist relatieve positionering: Het element met data-spy="scroll" vereist de CSS position eigenschap, met de waarde "relative" om correct te werken.
Voorbeeld
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav
class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Via JavaScript
Handmatig inschakelen met:
Voorbeeld
$('body').scrollspy({target: ".navbar"})
Scrollspy-opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voor gegevensattributen voegt u de optienaam toe aan data-, zoals in data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Scrollspy-methoden
De volgende tabel bevat alle beschikbare scrollspy-methoden.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Scrollspy-evenementen
De volgende tabel bevat alle beschikbare scrollspy-gebeurtenissen.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Meer voorbeelden
Scrollspy met geanimeerde scroll
Een vloeiende pagina-scroll toevoegen aan een anker op dezelfde pagina:
Soepel scrollen
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Scrollspy & Affix
De Affix -plug-in gebruiken samen met de Scrollspy-plug-in:
Horizontaal menu (navigatiebalk)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Verticaal menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>