Scrollspy · Modus Bootstrap v6.0

How it works

Scrollspy toggles the .active class on anchor (<a>) elements when the element with the id referenced by the anchor’s href is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap nav component or list group, but it will also work with any anchor elements in the current page. Here’s how it works.

To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the <body> or a custom element with a set height and overflow-y: scroll.
On the scrollable container, add data-bs-spy="scroll" and data-bs-target="#navId" where navId is the unique id of the associated navigation. If there is no focusable element inside the element, be sure to also include a tabindex="0" to ensure keyboard access.
As you scroll the “spied” container, an .active class is added and removed from anchor links within the associated navigation. Links must have resolvable id targets, otherwise they’re ignored. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>
Target elements that are not visible will be ignored. See the Non-visible elements section below.
Target ids are matched with getElementById, so ids containing special or percent-encoded characters (for example #item.1, #section:overview, or #%2Fpath) resolve correctly.

Detection

Scrollspy uses an IntersectionObserver to track sections without scroll-position polling. Detection is deterministic and driven entirely by an activation line near the top of the scroll container.

The active section is the deepest one whose top has scrolled past the activation line, like the section you’re currently reading.
While scrolling through the gap between two headings, the last activated section stays active until the next one crosses the line.
At the very top of the container, before any section crosses the line, the first section stays active.
At the very bottom of the container, the last section is activated even if its top never reaches the line (handy for short final sections).

Set where the activation line sits with topMargin (a more user-friendly % or px value from the top of the scroll root, such as 96px to sit below a stickied navbar), or take full control with the raw IntersectionObserver rootMargin string. See Options.

Jump to the debug overlay section to visualize the activation line in action.

Examples

Scroll the area below the navbar and watch the active class change. Open the menu and watch the menu items be highlighted as well.

First heading

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.

Second heading

Third heading

Fourth heading

Fifth heading

HTML

<nav id="navbar-example2" class="navbar bg-1 px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
      <div class="menu">
        <a class="menu-item" href="#scrollspyHeading3">Third</a>
        <a class="menu-item" href="#scrollspyHeading4">Fourth</a>
        <hr class="menu-divider">
        <a class="menu-item" href="#scrollspyHeading5">Fifth</a>
      </div>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-1 p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.