Bootstrap 5 Scrollspy

Scrollspy

Scrollspy bruges til atRulningPositioner automatisk opdaterer navigationslisten med links.

如何创建 Scrollspy

Hvordan opretter man Scrollspy

Følgende eksempel viser, hvordan man opretter Scrollspy:

Eksempel
<!-- Rullebar område -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigation bar - <a> elements bruges til at hoppe til en bestemt del af det rullebare område -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Afsnit 1</a></li>
</nav>
<div id="section1">
  <!-- Afsnit 1 -->
  <h1>Afsnit 1</h1>
<p>Prøv at rulle på denne side og se navigationsfeltet, mens du ruller!</p>
</div>
...

</body>

Prøv det selv

forklaringer data-bs-spy="scroll" tilføj til elementet, der bruges som rullebar område (normalt <body> elementer).

derefter tilføj data-bs-target egenskab, hvis værdi er id eller klassenavn for navigationsfeltet (.navbar) for at sikre, at navigationsfeltet er forbundet med den rullebare område.

Bemærk, at de rulbare elementer skal matche ID'en i links i navigationsfeltets liste (<div id="section1"> Matcher <a href="#section1">)

valgfri data-bs-offset Egenskaben angiver antallet af pixels, der skal tilflyttes fra toppen, når der beregnes rulningsposition. Dette er nyttigt, hvis du føler, at aktivtilstanden ændres for tidligt, når du klikker på links i navigationsfeltet for at hoppe til rulbare elementer. Standardværdien er 10 pixels.

kræver relativ positionElementer med data-bs-spy="scroll" kræver CSS Position Værdien af egenskaben skal sættes til "relative", før den kan fungere korrekt.