Advertisement
Google Ad Slot: content-top
Bootstrap 5 Scrollspy
Scrollspy in Bootstrap 5 is used to automatically update navigation links based on scroll position. It works with navigation components like .nav or .list-group, and it's often used to highlight the active link in a sidebar or navbar as you scroll through a page.
Scrollspy:
- A scrollable container (or the
body) with thedata-bs-spy="scroll"attribute. - A target navigation using the
data-bs-targetattribute to specify which navigation to update.
Section 1
Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!
Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!
Section 2
Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!
Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!
Section 3
Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!
Try to scroll this section and look how the section is navigate while scrolling! Try to scroll this section and look how the section is navigate while scrolling!
Key Attributes
data-bs-spy="scroll": Enables scrollspy functionality.
data-bs-target="#id": Specifies the navigation element to update.
data-bs-offset="number": Adjusts the scroll offset for updating the active link (default is 10).