Scrollspy

Dateer Bootstrap-navigasie of lys groepkomponente outomaties op gebaseer op rolposisie om aan te dui watter skakel tans aktief is in die viewport.

Op hierdie bladsy

Hoe dit werk

Scrollspy skakel die .activeklas op anker ( <a>) elemente wanneer die element met die idverwysing deur die anker s'n hrefin sig gerol word. Scrollspy word die beste gebruik in samewerking met 'n Bootstrap nav-komponent of lysgroep , maar dit sal ook met enige ankerelemente in die huidige bladsy werk. Hier is hoe dit werk.

Om te begin, benodig scrollspy twee dinge: 'n navigasie, lysgroep of 'n eenvoudige stel skakels, plus 'n blaaibare houer. Die blaaibare houer kan die <body>of 'n pasgemaakte element wees met 'n stel heighten overflow-y: scroll.
Op die blaaibare houer, voeg by data-bs-spy="scroll"en data-bs-target="#navId"waar navIdis die unieke idvan die gepaardgaande navigasie. Maak seker dat jy ook 'n insluit tabindex="0"om sleutelbordtoegang te verseker.
Soos jy die "gespioeneer" houer blaai, word 'n .activeklas bygevoeg en verwyder van ankerskakels binne die gepaardgaande navigasie. Skakels moet oplosbare idteikens hê, anders word hulle geïgnoreer. Byvoorbeeld, 'n <a href="#home">home</a>moet ooreenstem met iets in die DOM soos<div id="home"></div>
Teikenelemente wat nie sigbaar is nie, sal geïgnoreer word. Sien die Nie-sigbare elemente afdeling hieronder.

Voorbeelde

Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Maak die aftreklys oop en kyk hoe die aftrekitems ook uitgelig word.

Eerste opskrif

Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.

Tweede opskrif

Derde opskrif

Vierde opskrif

Vyfde opskrif

<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 nav

Scrollspy werk ook met geneste .navs. As 'n geneste .navis .active, sal sy ouers ook wees .active. Blaai deur die area langs die navigasiebalk en kyk hoe die aktiewe klas verander.