Bootstrap 4 Scrollspy (geavanceerd)
Bootstrap 4 Scrollspy
Scrollspy wordt gebruikt om automatisch links in een navigatielijst bij te werken op basis van de scrollpositie .
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-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="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-target
attribuut 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-offset
attribuut 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="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Volledige Bootstrap Scrollspy-referentie
Ga voor een volledige referentie van alle scrollspy-opties, -methoden en -gebeurtenissen naar onze Bootstrap JS Scrollspy-referentie .