Scrollspy

Sabunta kewayawa ta Bootstrap ta atomatik ko jera abubuwan rukuni bisa ga matsayin gungura don nuna wace hanyar haɗin ke aiki a halin yanzu a tashar kallo.

A wannan shafi

Yadda yake aiki

Scrollspy yana jujjuya .activeajin akan abubuwan anga ( <a>) lokacin da aka gungura abubuwan da aka idambata ta anga hrefzuwa gani. Scrollspy shine mafi kyawun amfani da haɗin gwiwa tare da bangaren Bootstrap nav ko jerin rukuni , amma kuma zai yi aiki tare da kowane abubuwan anga a cikin shafin na yanzu. Ga yadda yake aiki.

Don farawa, scrollspy yana buƙatar abubuwa biyu: kewayawa, ƙungiyar lissafi, ko saitin hanyoyin haɗin yanar gizo mai sauƙi, da akwati mai gungurawa. Kwandon da za a iya gungurawa na iya zama <body>ko na al'ada tare da saiti heightda overflow-y: scroll.
A kan ganga mai gungurawa, ƙara data-bs-spy="scroll"kuma data-bs-target="#navId"ina navIdkeɓaɓɓen idkewayawa mai alaƙa. Tabbatar cewa kun haɗa da tabindex="0"don tabbatar da samun damar madannai.
Yayin da kake gungurawa kwandon "leken asiri", .activeana ƙara wani aji kuma ana cire shi daga mahaɗan anga cikin kewayawa mai alaƙa. Dole ne hanyoyin haɗin gwiwa su kasance da maƙasudai masu warwarewa id, in ba haka ba za a yi watsi da su. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin DOM kamar<div id="home"></div>
Abubuwan da ba a gani ba za a yi watsi da su. Duba sashin abubuwan da ba a iya gani a ƙasa.

Misalai

Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Bude menu na zaɓuka kuma duba abubuwan da aka zazzage ana haskaka su ma.

Tafarki na farko

Wannan wasu abun ciki ne mai riƙe wuri don shafin scrollspy. Lura cewa yayin da kuke gungurawa ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.

Take na biyu

Take na uku

Tafi na hudu

Tafi na biyar

<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

Scrollspy kuma yana aiki tare da nsted .navs. Idan gida .navne .active, iyayensa ma za su kasance .active. Gungura wurin da ke kusa da maɓallin kewayawa kuma duba canjin aji mai aiki.