Bootstrap 5 Scrollspy

Scrollspy

Scrollspy wordt gebruikt omScrollenDe locatie update automatisch de navigatielijst van de links.

如何创建 Scrollspy

Hoe Scrollspy maken

Het volgende voorbeeld toont hoe je een Scrollspy kunt maken:

Voorbeeld
<!-- Scrollbaar gebied -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigatielijn - <a> elementen worden gebruikt om naar een bepaald deel van het scrollbare gebied te springen -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Section 1</a></li>
</nav>
<div id="section1">
  <!-- Section 1 -->
  <h1>Section 1</h1>
<p>Probeer de pagina te scrolen en bekijk de navigatielijn terwijl je scrolt!</p>
</div>
...

</body>

Probeer het zelf uit

De voorbeelduitleg data-bs-spy="scroll" Voeg toe aan het element dat wordt gebruikt als scrollbaar gebied (meestal <body> element).

voeg vervolgens toe data-bs-target kenmerk, waarvan de waarde id of de klasse van de navigatielijn is (.navbar). Dit is om ervoor te zorgen dat de navigatielijn verbonden is met het scrollbare gebied.

Let op, het scrollbare element moet overeenkomen met de ID van de link in de navigatielijst (<div id="section1"> Matchen <a href="#section1">)

Optioneel data-bs-offset Het kenmerk bepaalt het aantal pixels dat van de top wordt afgetrokken bij het berekenen van de scrollpositie. Dit is nuttig wanneer de status van de actieve link in de navigatiebalk te vroeg verandert bij het springen naar een scrollbare element. De standaardwaarde is 10 pixels.

Relative positioning vereistElementen met data-bs-spy="scroll" vereisen CSS Position De waarde van het kenmerk moet 'relative' zijn om correct te werken.