Scrollspy

Update automatisch Bootstrap-navigatie of lijstgroepcomponenten op basis van schuifpositie om aan te geven welke link momenteel actief is in de viewport.

Op deze pagina

Hoe het werkt

Scrollspy schakelt de .activeklasse op anker ( <a>) -elementen wanneer het element met de idwaarnaar wordt verwezen door het anker in hrefbeeld wordt gescrolld. Scrollspy kan het beste worden gebruikt in combinatie met een Bootstrap - navigatiecomponent of lijstgroep , maar het werkt ook met alle ankerelementen op de huidige pagina. Dit is hoe het werkt.

Om te beginnen heeft scrollspy twee dingen nodig: een navigatie, lijstgroep of een eenvoudige set links, plus een schuifbare container. De schuifbare container kan het <body>of een aangepast element zijn met een set heighten overflow-y: scroll.
Voeg op de schuifbare container toe data-bs-spy="scroll"en data-bs-target="#navId"waar navIdis het unieke idvan de bijbehorende navigatie. Zorg ervoor dat u ook een a tabindex="0"toevoegt om toegang tot het toetsenbord te garanderen.
Terwijl u door de "bespioneerde" container bladert, wordt een .activeklasse toegevoegd aan en verwijderd uit ankerlinks binnen de bijbehorende navigatie. Links moeten oplosbare iddoelen hebben, anders worden ze genegeerd. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de DOM zoals<div id="home"></div>
Doelelementen die niet zichtbaar zijn, worden genegeerd. Zie de sectie Niet-zichtbare elementen hieronder.

Voorbeelden

Scroll door het gebied onder de navigatiebalk en kijk hoe de actieve klas verandert. Open het vervolgkeuzemenu en kijk hoe de vervolgkeuzelijsten ook worden gemarkeerd.

Eerste rubriek

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Tweede rubriek

derde rubriek

vierde rubriek

vijfde rubriek

<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
  <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 bg-light 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>

Geneste navigatie

Scrollspy werkt ook met geneste .navs. Als een geneste .navis .active, zullen zijn ouders dat ook zijn .active. Scroll door het gebied naast de navigatiebalk en kijk hoe de actieve klas verandert.