MENU


Scrollspy

A Scrollspy can be attached to a Navbar or List Group to automatically indicate the section in view as the user scrolls the content.

Navbar:
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

  <div class="container">
      <div class="row">
        <div class="col-4">
          <nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
            <a class="navbar-brand" href="#">Navbar</a>
            <nav class="nav nav-pills flex-column">
              <a class="nav-link" href="#item-1">Item 1</a>
              <nav class="nav nav-pills flex-column">
                <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
                <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
              </nav>
              <a class="nav-link" href="#item-2">Item 2</a>
              <a class="nav-link" href="#item-3">Item 3</a>
              <nav class="nav nav-pills flex-column">
                <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
                <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
              </nav>
            </nav>
          </nav>
        </div>
        <div class="col-4">
          <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" tabindex="0" style="height:380px; overflow:scroll">
          <div id="item-1">
            <h4>Item 1</h4>
            <p>Spies are the ears and eyes of Princes.</p>
          </div>
          <div id="item-1-1">
            <h5>Item 1-1</h5>
            <p>He was a secret agent, and still alive thanks to his exact attention to the detail of his profession.</p>
          </div>
          <div id="item-1-2">
            <h5>Item 1-2</h5>
            <p>Every man is surrounded by a neighborhood of voluntary spies.</p>
          </div>
          <div id="item-2">
            <h4>Item 2</h4>
            <p>There aren't enough secrets to go round anymore. Some spies are having to invent secrets in order to earn a living.</p>
          </div>
          <div id="item-3">
            <h4>Item 3</h4>
            <p>There are Russian spies here now. And if we're lucky, they'll steal some of our secrets and they'll be two years behind.</p>
          </div>
          <div id="item-3-1">
            <h5>Item 3-1</h5>
            <p>Writing about magic is harder than writing about spies because you're dealing with something that doesn't really exist.</p>
          </div>
          <div id="item-3-2">
            <h5>Item 3-2</h5>
            <p>A good man does not spy around for the black spots in others, but presses unswervingly on towards his mark.</p>
          </div>
        </div>
     </div>
  </div>

</body><html>
List Group:
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

  <div class="container">
     <div class="row">
        <div class="col-4">
           <div id="list-example" class="list-group">
              <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
              <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
              <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
              <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
           </div>
        </div>
        <div class="col-4">
           <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0" style="height:150px; overflow:scroll">
              <h4 id="list-item-1">Item 1</h4><p>Spies are, by nature and necessity, pathological liars who strive to make their endgames justify their meanness.</p>
              <h4 id="list-item-2">Item 2</h4><p>There will come a time when it isn't 'They're spying on me through my phone' anymore. Eventually, it will be 'My phone is spying on me'.</p>
              <h4 id="list-item-3">Item 3</h4><p>Writing about magic is harder than writing about spies because you're dealing with something that doesn't really exist.</p>
              <h4 id="list-item-4">Item 4</h4><p>The report also said I show great potential as an agent. I figure they must be right, since I successfully broke into a safe to find that out.</p>
           </div>
        </div>
     </div>
  </div>

</body><html>

JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbar-example', offset: 10, method: 'auto'})var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]')); dataSpyList.forEach(function (dataSpyEl) { bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh(); //bootstrap.ScrollSpy.getInstance(dataSpyEl).dispose(); });var scrollSpyContentEl = document.getElementById('content'); var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl); // Returns a Bootstrap scrollspy instancevar firstScrollSpyEl = document.querySelector('[data-spy="scroll"]'); firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () { // do something... });