Scrollspy

Awtomatikong i-update ang Bootstrap navigation o ilista ang mga bahagi ng pangkat batay sa posisyon ng pag-scroll upang isaad kung aling link ang kasalukuyang aktibo sa viewport.

Sa pahinang ito

Paano ito gumagana

I-toggle ng Scrollspy ang .activeklase sa mga elemento ng anchor ( <a>) kapag ang elementong may idreference ng anchor's hrefay na-scroll sa view. Ang Scrollspy ay pinakamahusay na ginagamit kasabay ng isang Bootstrap nav component o list group , ngunit gagana rin ito sa anumang mga elemento ng anchor sa kasalukuyang pahina. Narito kung paano ito gumagana.

Upang magsimula, ang scrollspy ay nangangailangan ng dalawang bagay: isang nabigasyon, pangkat ng listahan, o isang simpleng hanay ng mga link, kasama ang isang na-scroll na lalagyan. Ang na-scroll na lalagyan ay maaaring ang <body>o isang custom na elemento na may set heightat overflow-y: scroll.
Sa na-scroll na lalagyan, idagdag data-bs-spy="scroll"at data-bs-target="#navId"kung saan navIdang natatangi idsa nauugnay na nabigasyon. Tiyaking isama rin ang isang tabindex="0"upang matiyak ang pag-access sa keyboard.
Habang nag-ii-scroll ka sa lalagyan na "na-spied", may .activeidinaragdag at inaalis na klase sa mga anchor link sa loob ng nauugnay na nabigasyon. Ang mga link ay dapat na may mga nareresolba na idtarget, kung hindi, mababalewala ang mga ito. Halimbawa, ang isang ay <a href="#home">home</a>dapat na tumutugma sa isang bagay sa DOM tulad ng<div id="home"></div>
Ang mga target na elemento na hindi nakikita ay hindi papansinin. Tingnan ang seksyong Hindi nakikitang mga elemento sa ibaba.

Mga halimbawa

Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Buksan ang dropdown na menu at panoorin ang mga dropdown na item na naka-highlight din.

Unang heading

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Pangalawang heading

Pangatlong heading

Pang-apat na heading

Ikalimang heading

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

Nested nav

Gumagana rin ang Scrollspy sa nested .navs. Kung ang isang nested .navay .active, ang mga magulang nito ay magiging .active. Mag-scroll sa lugar sa tabi ng navbar at panoorin ang aktibong pagbabago ng klase.