Scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
How it works
- It must be used on a Bootstrap
nav componentorlist group. - Scrollspy requires
position: relative;on the element you're spying on, usually the<body>. - Anchors (
b-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.
Example
Navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
Nested Nav
Scrollspy also works with nested Navs component.
If a nested Nav component is active, its parents will also be active
Scroll the area next to the navbar and watch the active class change.
List group
Scrollspy also works with ListGroupLists component.
Scroll the area next to the list group and watch the active class change.
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Simple anchors
Scrollspy is not limited to nav components and list groups, so it will work on any <a> anchor elements in the current document. Scroll the area and watch the .active class change.
Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 5
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Usage
Via data attributes
To easily add scrollspy behavior to your topbar navigation, add spy="scroll" to the element you want to spy on (most typically this would be the <body>).
Then add the target attribute with the ID or class of the parent element of any Bootstrap Nav component.
Resolvable ID targets required
Navbar links must have resolvable id targets.
For example, a <b-a href ="#home">home<b-a> must correspond to something in the DOM like <b-a href ="#home">home<b-a>.
Non-visible target elements ignored
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.