Bs5 Scrollspy in Bootstrap
Sure! Here's a neat guide on Bootstrap 5 Scrollspy used to automatically update navigation based on scroll position.
? Bootstrap 5 Scrollspy
Scrollspy monitors page scrolling and highlights navigation links corresponding to the visible section.
1. Basic Setup
You need:
A scrollable container with
data-bs-spy="scroll"A navigation with links pointing to sections via anchors (
href="#sectionID")
2. Example HTML
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0"><nav id="navbar-example" class="navbar navbar-light bg-light flex-column position-fixed top-0 start-0 p-3" style="height: 100vh; width: 200px;"> <nav class="nav nav-pills flex-column"> <a class="nav-link active" href="#section1">Section 1</a> <a class="nav-link" href="#section2">Section 2</a> <a class="nav-link" href="#section3">Section 3</a> </nav></nav><div class="container" style="margin-left: 220px; padding-top: 20px; height: 100vh; overflow-y: scroll;" id="scroll-container"> <h4 id="section1">Section 1</h4> <p>Content for section 1...</p> <h4 id="section2">Section 2</h4> <p>Content for section 2...</p> <h4 id="section3">Section 3</h4> <p>Content for section 3...</p></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script></body>3. Important Attributes
data-bs-spy="scroll" enables Scrollspy on container (usually<body>or a scrollable<div>)data-bs-target="#navbar-example" selector for nav element with linksdata-bs-offset="0" offset to consider active section (adjust if you have fixed headers)tabindex="0" required on the scroll container for accessibility and Scrollspy to work
4. Scrollspy on a Specific Element
If your scrollable container isnt <body>, initialize Scrollspy via JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.getElementById('scroll-container'), { target: '#navbar-example'})5. Notes
The nav links must use hashes pointing to IDs of the target sections.
Scrollspy highlights the
.activelink automatically based on scroll position.Adjust
data-bs-offsetif you have fixed navbars to compensate for height.
Summary
| Attribute/Option | Description |
|---|---|
data-bs-spy="scroll" | Enable scrollspy on container |
data-bs-target | Nav selector to update active links |
data-bs-offset | Pixel offset to adjust active section |
tabindex="0" | Needed for scrollable container |
If you want, I can help you build a full page with scrollspy navigation or customize it further!
