Scrollspy
How it works
Scrollspy has a few requirements to function properly:
Scrollspy for more bootstrao components Bootstrap Scrollspy documentation
- It must be used on a Bootstrap nav component or list group.
- Scrollspy requires
position: relative;
on the element you’re spying on, usually the<body>
. - Anchors (
<a>
) are required and must point to an element with thatid
.
When successfully implemented, your nav or list group will update accordingly, moving the .active
class from one item to the next based on their associated targets.
Scrollable containers and keyboard access
If you’re making a scrollable container (other than the <body>
), be sure to have a height
set and overflow-y: scroll;
applied to it—alongside a tabindex="0"
to ensure keyboard access.
Example in navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
Example in navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.