Scrollspyv5.x

Scrollspy automatically updates navigation on scroll

Bootstrap v5.x | Scrollspy

First heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, itaque, veniam dolor illum ex aliquid ullam, hic mollitia debitis facere dolore vero? Quia tempora id quibusdam nihil sint. Illo alias, eveniet, aut distinctio impedit accusamus architecto fugit quos, enim incidunt doloremque vero. Magnam praesentium sed earum quis vitae libero, eius voluptas laboriosam ipsam in perspiciatis ad voluptate beatae repellat voluptatem, deserunt eum fugit quaerat veniam? Quaerat voluptatem animi nulla magnam obcaecati quis. Id nulla dolorum voluptatem odio velit praesentium officia vitae odit perspiciatis consequuntur hic excepturi vel iusto officiis, exercitationem qui ab animi accusantium repellat. Quisquam sequi quos, ad ut nobis, facere doloremque tempore enim dignissimos hic et! Ducimus id, rem vitae optio illum fuga qui explicabo?

Second heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, itaque, veniam dolor illum ex aliquid ullam, hic mollitia debitis facere dolore vero? Quia tempora id quibusdam nihil sint. Illo alias, eveniet, aut distinctio impedit accusamus architecto fugit quos, enim incidunt doloremque vero. Magnam praesentium sed earum quis vitae libero, eius voluptas laboriosam ipsam in perspiciatis eatae repellat voluptatem, deserunt eum fugit quaerat veniam? Quaerat voluptatem animi nulla magnam obcaecati quis. Id nulla dolorum voluptatem odio velit praesentium officia vitae odit perspiciatis consequuntur hic excepturi vel iusto officiis, exercitationem qui ab animi accusantium repellat. Quisquam sequi quos, ad ut nobis, facere doloremque tempore enim dignissimos hic et! Ducimus id, rem vitae optio illum fuga qui explicabo?

Third heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, itaque, veniam dolor illum ex aliquid ullam, hic mollitia debitis facere dolore vero? Quia tempora id quibusdam nihil sint. Illo alias, eveniet, aut distinctio impedit accusamus architecto fugit quos, enim incidunt doloremque verooluptatem animi nulla magnam obcaecati quis. Id nulla dolorum voluptatem odio velit praesentium officia vitae odit perspiciatis consequuntur hic excepturi vel iusto officiis, exercitationem qui ab animi accusantium repellat. Quisquam sequi quos, ad ut nobis, facere doloremque tempore enim dignissimos hic et! Ducimus id, rem vitae optio illum fuga qui explicabo?

<nav id="navbar-example" class="navbar bg-body-tertiary px-3 mb-3">
   <a class="navbar-brand" href="#">Scrollspy</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="#scrollspyHeading3">Third</a>
      </li>
   </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-root-margin="0px 0px -40%"
   data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
   <h4 id="scrollspyHeading1">First heading</h4>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, itaque, veniam dolor illum ex
      aliquid ullam, hic mollitia debitis facere dolore vero? Quia tempora id quibusdam nihil sint.
      Illo alias, eveniet, aut distinctio impedit accusamus architecto fugit quos, enim incidunt
      doloremque vero. Magnam praesentium sed earum quis vitae libero, eius voluptas laboriosam ipsam
      in perspiciatis ad voluptate beatae repellat voluptatem, deserunt eum
      fugit quaerat veniam? Quaerat voluptatem animi nulla magnam obcaecati quis. Id nulla dolorum
      voluptatem odio velit praesentium officia vitae odit perspiciatis consequuntur hic excepturi vel
      iusto officiis, exercitationem qui ab animi accusantium repellat. Quisquam sequi quos, ad ut
      nobis, facere doloremque tempore enim dignissimos hic et! Ducimus id, rem vitae optio illum fuga
      qui explicabo?</p>
   <h4 id="scrollspyHeading2">Second heading</h4>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, itaque, veniam dolor illum ex
      aliquid ullam, hic mollitia debitis facere dolore vero? Quia tempora id quibusdam nihil sint.
      Illo alias, eveniet, aut distinctio impedit accusamus architecto fugit quos, enim incidunt
      doloremque vero. Magnam praesentium sed earum quis vitae libero, eius voluptas laboriosam ipsam
      in perspiciatis eatae repellat voluptatem, deserunt eum
      fugit quaerat veniam? Quaerat voluptatem animi nulla magnam obcaecati quis. Id nulla dolorum
      voluptatem odio velit praesentium officia vitae odit perspiciatis consequuntur hic excepturi vel
      iusto officiis, exercitationem qui ab animi accusantium repellat. Quisquam sequi quos, ad ut
      nobis, facere doloremque tempore enim dignissimos hic et! Ducimus id, rem vitae optio illum fuga
      qui explicabo?</p>
   <h4 id="scrollspyHeading3">Third heading</h4>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, itaque, veniam dolor illum ex
      aliquid ullam, hic mollitia debitis facere dolore vero? Quia tempora id quibusdam nihil sint.
      Illo alias, eveniet, aut distinctio impedit accusamus architecto fugit quos, enim incidunt
      doloremque verooluptatem animi nulla magnam obcaecati quis. Id nulla dolorum
      voluptatem odio velit praesentium officia vitae odit perspiciatis consequuntur hic excepturi vel
      iusto officiis, exercitationem qui ab animi accusantium repellat. Quisquam sequi quos, ad ut
      nobis, facere doloremque tempore enim dignissimos hic et! Ducimus id, rem vitae optio illum fuga
      qui explicabo?</p>
</div>

Custom CSS

Custom CSS is required to style the window height and add set the overflow-y property to 'scroll'.

/* Sets the height of the scroll window and overflow-y --- */
[data-bs-spy='scroll'] {
   height: 250px;
   overflow-y: auto; position: relative;
}
/* Sets the margin for the headers ----------------------- */
[data-bs-spy='scroll'] h4 {
   scroll-margin-top: 1rem;
}

Custom JS

If you are injecting the scrollspy after the DOM has loaded, you may need to refresh the Scrollspy by running a function such as this, below.

function refreshScrollspy() {
   const spyEl = document.querySelector('[data-bs-spy="scroll"]');
   if (!spyEl) {
   return;
   }

const inst = bootstrap.ScrollSpy.getInstance(spyEl);
   if (inst) {
      inst.refresh();
   } else {
      bootstrap.ScrollSpy.getOrCreateInstance(spyEl);
   }
}

This will reset the page. Are you sure?