HTML Markup
1. Opret et ``-element til at holde scrollspy-navigationslinkene: ```html ... ``` 2. Tilføj en `data-spy="scroll"`-attribut til ``-elementet for at aktivere scrollspy-funktionalitet. ```html ... ``` JavaScript 1. Inkluder jQuery og Bootstrap JavaScript-biblioteket. 2. Tilføj følgende JavaScript-kode for at initialisere scrollspy'en: ```javascript $(funktion () { $('body').scrollspy({ target:'#scrollspy', offset:20 }); }); ``` - 'Target'-indstillingen angiver ID'et for navigationselementet, der indeholder scrollspy-links. - "Offset"-indstillingen indstiller afstanden i pixels mellem toppen af browservinduet og det punkt, hvor scrollspy-navigationen bliver aktiv. Nu, når en side rulles, vil det aktive link i navigationen automatisk opdatere baseret på den tilsvarende sektion, der er synlig i viewporten. Husk at erstatte `...`-sektionerne i HTML-markeringen med dit eget indhold og navigationslinks.
```html
...
```
2. Tilføj en `data-spy="scroll"`-attribut til `
JavaScript
1. Inkluder jQuery og Bootstrap JavaScript-biblioteket.
2. Tilføj følgende JavaScript-kode for at initialisere scrollspy'en:
```javascript
$(funktion () {
$('body').scrollspy({
target:'#scrollspy',
offset:20
});
- 'Target'-indstillingen angiver ID'et for navigationselementet, der indeholder scrollspy-links.
- "Offset"-indstillingen indstiller afstanden i pixels mellem toppen af browservinduet og det punkt, hvor scrollspy-navigationen bliver aktiv.
Nu, når en side rulles, vil det aktive link i navigationen automatisk opdatere baseret på den tilsvarende sektion, der er synlig i viewporten.
Husk at erstatte `...`-sektionerne i HTML-markeringen med dit eget indhold og navigationslinks.
Forrige : Hvordan opretter man Bootstrap 5 Popovers?