Bootstrap 5 Scrollspy

Scrollspy

Scrollspy används för attRullaLäget uppdateras automatiskt i navigationslistans länkar.

Hur man skapar Scrollspy

Hur man skapar Scrollspy

Nedan visas hur man skapar en Scrollspy:

Exempel
<!-- Skrollbar område -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigationsfält - <a> elementen används för att hoppa till en viss del av det skrollbara området -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Avsnitt 1</a></li>
</nav>
<div id="section1">
  <!-- Avsnitt 1 -->
  <h1>Avsnitt 1</h1>
<p>Försök att rulla på denna sida och titta på navigationsfältet när du rullar!</p>
</div>
...

</body>

Prova själv

Försök att förklara data-bs-spy="scroll" Lägg till till elementet som används som skrollbar område (vanligtvis <body> element).

Lägg sedan till data-bs-target egenskapen, med värdet id eller klassnamnet på navigationsfältet (.navbar) Detta är för att säkerställa att navigationsfältet är kopplat till den skrollbara området.

Observera att skrollbara element måste matcha länk-ID:n i navigationsfältets lista (<div id="section1"> Matchar <a href="#section1">)

Valfritt data-bs-offset Egenskapen specificerar antalet pixlar från toppen som används vid beräkning av rullposition. Detta är användbart om du känner att aktivitetsstatusen ändras för tidigt när länkar i navigationsfältet hoppas till skrollbara element. Standardvärdet är 10 pixlar.

Relativ positionElement med data-bs-spy="scroll" kräver CSS Position Värdet för egenskapen måste sättas till "relative" för att fungera korrekt.