Ebiwandiiko ebiyitibwa Scrollspy

Okulongoosa mu ngeri ey’otoma ebitundu by’okutambuliramu kwa Bootstrap oba olukalala lw’ekibinja okusinziira ku kifo ky’okutambula okulaga enkolagana ki ekola mu kiseera kino mu kifo eky’okulaba.

Ku muko guno

Engeri gye kikola

Scrollspy ekyusa .activeekibiina ku elementi za anchor ( <a>) nga elementi idn'ejuliziddwa anchor's hrefegenda mu kulaba. Scrollspy esinga kukozesebwa wamu ne Bootstrap nav component oba list group , naye era ejja kukola n'ebintu byonna eby'ennanga mu lupapula oluliwo kati. Laba engeri gye kikola.

Okutandika, scrollspy yeetaaga ebintu bibiri: okutambulira, ekibinja ky’olukalala, oba ekibinja eky’enkolagana ennyangu, n’okwongerako ekintu ekiyinza okutambula. Ekintu ekiyinza okutambula kiyinza okuba <body>oba ekintu eky'ennono nga kiriko seti heightne overflow-y: scroll.
Ku kibya ekiyinza okutambula, yongera data-bs-spy="scroll"era data-bs-target="#navId"wa we navIdkiri eky’enjawulo ideky’okutambulirako okukwatagana. Kakasa nti era ossaamu a tabindex="0"okukakasa nti keyboard eyingira.
Nga bw’ogenda mu kifo ekiyitibwa “spied”, .activekiraasi eyongerwako era n’eggyibwa ku nkolagana z’ennanga munda mu kutambula okukwatagana. Links zirina okuba ne idtargets ezisobola okugonjoolwa, bwe kitaba ekyo zisiwuuka empisa. Okugeza, a <a href="#home">home</a>alina okukwatagana n’ekintu mu DOM nga<div id="home"></div>
Ebintu ebigendererwa ebitalabika bijja kubuusibwa amaaso. Laba ekitundu ky’ebintu ebitali birabika wansi.

Eby’okulabirako

Ssenda ekitundu wansi wa navbar era olabe enkyukakyuka ya kiraasi ekola. Ggulawo menu egwa wansi era olabe ebintu ebikka nga nabyo bikulaga.

Omutwe ogusooka

Kino kye kimu ku bikwata ku kifo eky'olupapula lwa scrollspy. Weetegereze nti bw’ogenda wansi ku lupapula, enkolagana esaanira ey’okutambuliramu eraga. Kiddibwamu mu kyokulabirako kyonna eky'ekitundu. Tusigala nga twongerako kkopi endala ez’ekyokulabirako wano okuggumiza okuzingulula n’okulaga.

Omutwe ogwokubiri

Omutwe ogw’okusatu

Omutwe ogw’okuna

Omutwe ogw’okutaano

<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 era ekola ne nested .navs. Singa nested .naveba .active, bazadde baayo nabo bajja kuba .active. Ssenda ekitundu ekiriraanye navbar era olabe enkyukakyuka ya kiraasi ekola.