Vytvorenie scrollspy navigácie v Bootstrap 5 je jednoduché a poskytuje používateľom jednoduchý spôsob navigácie na vašej webovej stránke. Môžete to dosiahnuť takto:
Značka HTML
1. Vytvorte prvok „“, ktorý bude obsahovať navigačné odkazy:
```html
...
```
2. Pridajte atribút `data-spy="scroll"` do prvku `
`, čím povolíte funkciu scrollspy.
```html
...
```
JavaScript
1. Zahrňte jQuery a knižnicu JavaScript Bootstrap.
2. Pridajte nasledujúci kód JavaScript na inicializáciu scrollspy:
```javascript
$(funkcia () {
$('body').scrollspy({
cieľ:'#scrollspy',
posun:20
});
});
```
- Možnosť `target` určuje ID navigačného prvku, ktorý obsahuje rolovacie odkazy.
- Voľba `Offset` nastavuje vzdialenosť v pixeloch medzi hornou časťou okna prehliadača a bodom, kde sa aktivuje rolovacia navigácia.
Teraz, keď sa stránka posúva, aktívny odkaz v navigácii sa automaticky aktualizuje na základe príslušnej sekcie, ktorá je viditeľná vo výreze.
Nezabudnite nahradiť sekcie `...` v značke HTML vlastným obsahom a navigačnými odkazmi.