Scrollspy

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

View the official docs here

Examples

Basic

First heading

...

Second heading

...

Third heading

...

Fourth heading

...

Fifth heading

...

Astro file 
---
// Template example only
---

<nav
  id="navbar-example2"
  class="navbar bg-primary px-3 mb-3"
  data-bs-theme="dark"
>
  <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 dropdown">
      <a
        class="nav-link dropdown-toggle"
        data-bs-toggle="dropdown"
        href="#"
        role="button"
        aria-expanded="false">Dropdown</a
      >
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider" /></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </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 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>
<script>
  import 'bootstrap/js/dist/scrollspy';
</script>
<style>
  .scrollspy-example {
    height: 200px;
    margin-top: 0.5rem;
    overflow: auto;
  }
</style>