Bootstrap 5 Scrollspy
- Forrige side BS5 Toast
- Næste side BS5 Offcanvas
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> ...
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.
- Forrige side BS5 Toast
- Næste side BS5 Offcanvas