Bootstrap Scrollspy Plugin Advanced
Bootstrap Scrollspy is a plugin that automatically updates navigation links based on the scroll position of the page. It’s commonly used in single-page websites, documentation pages, and sections with smooth scrolling.
✅ Basic Scrollspy Example
Key Attributes:
| Attribute | Meaning |
|---|---|
data-spy="scroll" | Enables scroll spying. |
data-target="#navbar-example" | Points to the navigation to update. |
data-offset="70" | Adjusts activation offset for highlighting based on navbar height. |
🔹 Scrollspy with Smooth Scrolling (Advanced)
Makes section scrolling smooth when clicking a menu item.
🔹 Scrollspy Inside a Div (Scrollable Container)
Scrollspy also works inside a scrollable container:
🔹 Initialize Scrollspy via JavaScript
Used when content is added dynamically (e.g., AJAX pages).
✔ When Do You Need Scrollspy?
| Use Case | Recommended |
|---|---|
| Single-page website | ✔️ |
| Long documentation | ✔️ |
| Page with auto-updating active link navigation | ✔️ |
| Smooth scroll UI experience | ✔️ |
| Sections with anchors | ✔️ |
🧠 Tips for Best Results
✔ Use offset equal to navbar height (60–100px).
✔ Use sticky/fixed navigation for better UI.
✔ Use smooth scrolling for a polished effect.
