Il plug -in Bootstrap 5 Scrollspy è un sistema di navigazione che evidenzia i collegamenti Navbar mentre l'utente scorre la pagina. Scrollspy indica la posizione dell'utente su una pagina web che li aiuta a vedere dove si trovano su quella pagina. Scrollspy viene utilizzato solo con i gruppi di nav o elenco. Prima di usare ScrollSpy, la posizione relativa deve essere applicata al corpo HTML.

Questo articolo riconosce su

• Creazione di Scrollspy
• Scrollspy con navbar
• Scrollspy con gruppo di elenco

Crea scrollspy

Scrollspy può essere applicato sui due componenti:

• Navbar
• Gruppo di elenchi

Scrollspy con navbar

Per creare uno scrollspy, usa il data-bs-sppy = "scroll" attributo per rendere scorrevole l'area richiesta. Ad esempio, scegliamo il corpo HTML come area scorrevole. Dare il nome ID o classe della barra di navigazione a Data-BS-target Attributo per collegare Navbar o Elenco Group con area scortabile.

Codice per la sezione Head

Codice per la sezione del corpo

Sezione 1

Sezione 2

Sezione 3

Sezione 4

Sezione 5

Sezione 6

Ecco come viene creato uno scrollspy in bootstrap 5.

Scrollspy con gruppo di elenchi

Di seguito è riportato un esempio di scrollspy con un gruppo di elenco. L'attributo data-bs-sppy = "scroll" viene utilizzato per rendere il div scorrevole e Data-BS-target L'attributo viene utilizzato per assicurarsi che il contenuto sia collegato all'area scorrevole. Infine, per abilitare il Crollspy utilizzare il codice JavaScript e impostare la posizione del corpo su un relativo.

Codice per la sezione Head

Codice per la sezione del corpo

Bootstrap Scrollspy

Sezione 1
Sezione 2
Sezione 3
Sezione 4
Sezione 5

Sezione 1

Il plug -in Bootstrap 5 Scrollspy è un sistema di navigazione che evidenzia i collegamenti Navbar mentre l'utente scorre il
pagina. Scrollspy indica la posizione dell'utente in una pagina Web che li aiuta a vedere dove sono
in piedi su quella pagina. Scrollspy viene utilizzato solo con i gruppi di nav o elenco. Prima di usare Scrollspy il parente
La posizione deve essere applicata al corpo HTML.

Sezione 2

Il plug -in Bootstrap 5 Scrollspy è un sistema di navigazione che evidenzia i collegamenti Navbar mentre l'utente scorre il
pagina. Scrollspy indica la posizione dell'utente in una pagina Web che li aiuta a vedere dove sono
in piedi su quella pagina. Scrollspy viene utilizzato solo con i gruppi di nav o elenco. Prima di usare Scrollspy il parente
La posizione deve essere applicata al corpo HTML.

Sezione 3

Il plug -in Bootstrap 5 Scrollspy è un sistema di navigazione che evidenzia i collegamenti Navbar mentre l'utente scorre il
pagina. Scrollspy indica la posizione dell'utente in una pagina Web che li aiuta a vedere dove sono
in piedi su quella pagina. Scrollspy viene utilizzato solo con i gruppi di nav o elenco. Prima di usare Scrollspy il parente
La posizione deve essere applicata al corpo HTML.

Sezione 4

Il plug -in Bootstrap 5 Scrollspy è un sistema di navigazione che evidenzia i collegamenti Navbar mentre l'utente scorre il
pagina. Scrollspy indica la posizione dell'utente in una pagina Web che li aiuta a vedere dove sono
in piedi su quella pagina. Scrollspy viene utilizzato solo con i gruppi di nav o elenco. Prima di usare Scrollspy il parente
La posizione deve essere applicata al corpo HTML.

Sezione 5

Il plug -in Bootstrap 5 Scrollspy è un sistema di navigazione che evidenzia i collegamenti Navbar mentre l'utente scorre il
pagina. Scrollspy indica la posizione dell'utente in una pagina Web che li aiuta a vedere dove sono
in piedi su quella pagina. Scrollspy viene utilizzato solo con i gruppi di nav o elenco. Prima di usare Scrollspy il parente
La posizione deve essere applicata al corpo HTML.

Ecco come viene creato Scrollspy utilizzando i gruppi di elenco.

Conclusione

Scrollspy viene creato usando l'attributo data-bs-sppy = "scroll" E Data-BS-target attributo sul tag del corpo per renderlo scorrevole e se si desidera applicare questi attributi su un div, quindi aggiungi offset dati attribuire e impostare il trabocco a auto. Nell'articolo di cui sopra, il processo di creazione di una pergamena è spiegato in dettaglio e per far funzionare correttamente Scrollspy sempre che la posizione del suo corpo sia impostata su parente.