Skip to main content

Scrollspy

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

How it works

Scrollspy requires two things: a navigation, list group, or a simple set of links that point to #ids in the page, and a scrollable container. Add data-boodoo-spy="scroll" (with an optional data-boodoo-offset or data-boodoo-target) to the scroll container — typically <body>.

Scroll the area below and watch the sidebar (or navbar) update. The current item is highlighted automatically.

Simple

This is some placeholder content for the scrollspy page.

Click & keyboard

This is some placeholder content.

Scrolling

This is some placeholder content.

<body data-boodoo-spy="scroll" data-boodoo-target="#navbar-example">
  ...
  <nav id="navbar-example">
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
    </ul>
  </nav>
</body>

Scrollspy works great with a .list-group in a sticky sidebar while the main content scrolls.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-example">
      <a class="list-group-item list-group-item-action" href="#item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#item-2">Item 2</a>
    </div>
  </div>
  <div class="col-8">
    <div data-boodoo-spy="scroll" data-boodoo-target="#list-example"
         data-boodoo-offset="0" class="overflow-y-auto">
      <h4 id="item-1">Item 1</h4>
      <p>...</p>
      <h4 id="item-2">Item 2</h4>
      <p>...</p>
    </div>
  </div>
</div>

Note: the sample scrollspy demo above needs the scrolling container itself to be the spied element with data-boodoo-spy; boodoo tracks window scroll by default, or the spied container's scroll position based on its offset.