Scrollspy

Name: Rence Material
Author: david abalaku

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Navigation example

Scrollspy requires position: relative; on the element you're spying on, usually the <body>.

Part 1

Scroll down to see the navigation highlights change. This is a functional demonstration of Scrollspy integration.

Part 2

You have reached the second part. The link above should now be active.

HTML

<!-- Scrollspy Navigation -->
<nav id="navbar-example" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Log</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#scroll-1">First</a></li>
    <li class="nav-item"><a class="nav-link" href="#scroll-2">Second</a></li>
  </ul>
</nav>

<!-- Scrollable container -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" class="scrollspy-example" tabindex="0" style="height: 200px; overflow-y: scroll;">
  <h4 id="scroll-1">First heading</h4>
  <p>...</p>
  <h4 id="scroll-2">Second heading</h4>
  <p>...</p>
</div>