Bootstrap 5 Scrollspy

Scrollspy

Scrollspy ay ginagamit para sa pagonon sa paghahanap ng mga tag.PagusokAng lokasyon ay awtomatikong nag-aupdate sa mga link sa listahan ng navigation.

Paano gumawa ng Scrollspy

Paano gumawa ng Scrollspy

Ang sumusunod na halimbawa ay nagpapakita kung paano gumawa ng Scrollspy:

Halimbawa
<!-- Area na maagawan -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigation bar - Ang <a> element ay ginagamit upang lumipat sa isang bahagi na maagawan sa lugar na maagawan -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Section 1</a></li>
</nav>
<div id="section1">
  <!-- Section 1 -->
  <h1>Section 1</h1>
<p>Subukan na iyong i-scroll ang pahina at tingnan ang navigation bar habang tinutuloy ang paggalaw!</p>
</div>
...

</body>

Subukan ang iyong sarili

Ipaliwanag ang halimbawa data-bs-spy="scroll" Idagdag sa elemento na gagamitin bilang lugar na maagawan (palakain ang <body> elemento).

Pagkatapos ay idagdag ang data-bs-target Atributo, ang halaga nito ay id o klase ng navigation bar (.navbar) Na ito ay para siguraduhin na ang navigation bar ay nakakabit sa lugar na maagawan.

Pansin na ang elemento na maagawan ay dapat tumugma sa ID ng link sa listahan ng navigation bar (<div id="section1"> Pagkakatugma <a href="#section1">)

Opsiyonal data-bs-offset Ang atributo ay nagtutukoy sa bilang ng pixel ng pagkakasalalay mula sa itaas sa pagtutukoy ng posisyon ng paggalaw. Kapag ang link sa navigation bar ay lumilipat sa elementong maagawan, kung nararamdaman mo na ang aktibong estado ay napagpalit ng maaga, ito ay napaka-kalakip. Ang default na halaga ay 10 pixel.

Kailangan ng pagsasaayos na kaugnay sa posisyonMayroon na ang elemento na may data-bs-spy="scroll" ay kailangang may CSS Posisyon Ang halaga ng atributo ng propersiyon ay dapat na "relative" upang gumana nang maayos.