Bootstrap Scrollspy-plug-in (geavanceerd)
De Scrollspy-plug-in
De Scrollspy-plug-in wordt gebruikt om links in een navigatielijst automatisch bij te werken op basis van de schuifpositie.
Hoe maak je een Scrollspy aan?
Het volgende voorbeeld laat zien hoe u een scrollspy maakt:
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>
Voorbeeld uitgelegd
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.
Scrollspy verticaal menu
In dit voorbeeld gebruiken we de verticale navigatiepillen van Bootstrap als menu:
Voorbeeld
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Volledige Bootstrap Scrollspy-referentie
Ga voor een volledige referentie van alle scrollspy-methoden en -gebeurtenissen naar onze Bootstrap JS Scrollspy-referentie .