Das Erstellen eines Scrollspy in Bootstrap 5 umfasst das Hinzufügen von Datenattributen zu Navigationselementen und Zielabschnitten sowie einige JavaScript-Initialisierungen. Befolgen Sie diese Schritte, um einen einfachen Scrollspy einzurichten:

1. Bootstrap einschließen: Stellen Sie sicher, dass Sie Bootstrap-CSS und JavaScript in Ihr HTML-Dokument einbinden:

```html

„

2. Navigationselemente erstellen: Erstellen Sie ein Navigationselement, beispielsweise ein Menü oder eine Liste, das Links zu verschiedenen Abschnitten Ihrer Seite enthält. Jeder Link sollte über Datenattribute verfügen, die den entsprechenden Zielabschnitt und den Navigationstyp angeben:

```html

„

3. Zielabschnitte hinzufügen: Erstellen Sie die verschiedenen Abschnitte auf Ihrer Seite, zu denen Sie scrollen möchten. Jeder Abschnitt sollte ein eindeutiges ID-Attribut haben:

```html

Abschnitt 1

Inhalt 1

Abschnitt 2

Inhalt 2

Abschnitt 3

Inhalt 3

„

4. Scrollspy initialisieren: Initialisieren Sie abschließend den Scrollspy mit JavaScript, nachdem das DOM geladen wurde:

„Javascript

window.addEventListener('DOMContentLoaded', () => {

bs.scrollspy('.nav-fill');

});

„

Wenn Sie nun auf der Seite nach unten scrollen, ändern sich die Navigationslinks automatisch und zeigen den aktuell aktiven Abschnitt an, sodass Sie problemlos durch Ihre Inhalte navigieren können.