Bootstrap 5 TutorialLesson 29Free preview

BS5 Scrollspy

This lesson is part of Bootstrap · All levels

Summary

Scrollspy monitors the scroll position of the page and marks the navigation links that correspond to the section being viewed, suitable for long documentation. By the way, add the data-bs-spy="scroll" to the scroll element (usually body) with the data-bs-target pointing to navigation, then the link should href to the id section. Bootstrap will automatically add the class .active.

Key points

Activate with data-bs-spy="scroll" and data-bs-target pointing to navigation.
The data-bs-offset sets the range of sight when determining the active part.
The link should href to the id section, e.g. #section1.
Bootstrap automatically adds the .active class to the active link.
Useful for documentation, portfolios, and long landing pages.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.