Scrollspy
Bootstrap 5 Scrollspy component
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Basic example
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae lorem quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer scelerisque justo vitae felis interdum, eu molestie nulla tincidunt. Aenean aliquam in ipsum ac imperdiet. Vestibulum vestibulum, mi non venenatis ultrices, nisi ipsum sollicitudin odio, nec mollis purus magna et libero. Vivamus rhoncus eros arcu, quis finibus lacus dapibus at. Ut gravida mauris vel ultricies viverra.Section 2
Vivamus non vehicula odio, ut fringilla neque. Morbi magna nunc, efficitur eget tincidunt in, fringilla in enim. Aenean tincidunt enim orci, sit amet porttitor quam ornare at. Phasellus viverra blandit lorem, vitae venenatis lectus mattis at. In at commodo lorem. Sed et dapibus odio, non maximus augue. Proin ligula quam, vehicula vel metus vitae, rutrum ornare nibh. Sed id nulla sapien. Sed semper lacus quis massa molestie, quis egestas neque sagittis. Proin quis orci eget risus suscipit porttitor. Etiam blandit porta auctor. Praesent vel odio faucibus, elementum leo non, blandit nunc. Maecenas in tellus in urna faucibus ullamcorper. Donec at ligula at velit scelerisque bibendum. Curabitur id mi rhoncus felis laoreet ornare nec ac orci.Section 3
Duis dapibus bibendum nulla eget molestie. Ut id ante eget lorem congue venenatis. Donec ut imperdiet augue. Aenean a ipsum urna. Morbi venenatis libero non viverra dictum. Vivamus elit odio, dapibus tincidunt nisl at, convallis imperdiet nisi. Maecenas pharetra euismod tortor in mollis. In semper magna ut lectus dapibus, euismod efficitur nisl convallis.Subsection A
Cras laoreet iaculis tortor sed posuere. Nullam a velit eget eros luctus hendrerit. Sed rhoncus tempor cursus. Praesent a augue justo. Vestibulum nec arcu blandit, cursus nunc at, blandit ex. Aenean vitae tempus ex. Cras at nunc dui. Phasellus pretium arcu placerat elit elementum, at commodo diam gravida. Sed tristique fermentum consectetur.Subsection B
Cras malesuada eros suscipit est iaculis sagittis. Phasellus id nisi eu felis rhoncus dapibus porttitor ac libero. Etiam et nunc leo. Vestibulum semper, erat in finibus egestas, sem turpis convallis ligula, vel suscipit mi risus sit amet urna. Praesent ut augue vel risus iaculis vulputate id eget felis.Section 4
Donec accumsan nisi facilisis, aliquam nunc quis, scelerisque dui. Donec diam urna, commodo et arcu in, finibus iaculis enim. Sed varius ac massa id finibus. Vivamus egestas rhoncus arcu et pellentesque. Donec eget massa sed sem sodales rutrum in quis tortor. Vivamus sed lacus orci. Nullam viverra purus eget massa rutrum, interdum sollicitudin urna semper. Vestibulum posuere metus sed mattis hendrerit.
How it works
Scrollspy has a few requirements to function properly:
- 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>. - When spying on elements other than the
<body>, be sure to have aheightset andoverflow-y: scroll;applied. - 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.