Bootstrap 5 Scrollspy
Scrollspy is used to automatically update links in a navigation list based on scroll position.
How To Create a Scrollspy
The following example shows how to create a scrollspy:
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<li><a href="#section1">Section 1</a></li>
<!-- Section 1 -->
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
data-bs-spy="scroll" to the element that should be used as the scrollable
area (often this is the
Then add the
data-bs-target attribute with a value of the id or the class name
of the navigation bar (
.navbar). This is to make sure that the navbar
is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's
<div id="section1"> matches
data-bs-offset attribute specifies the number of pixels to offset
from top when calculating the position of scroll. This is useful when you feel
that the links inside the navbar changes the active state too soon or too early
when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-bs-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.