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 erina ebitonotono bye yeetaaga okukola obulungi:

Kiteekwa okukozesebwa ku kitundu kya Bootstrap nav oba ekibiina ky'olukalala .
Scrollspy yeetaaga position: relative;ku elementi gy'oketta, ebiseera ebisinga <body>.
Ennanga ( <a>) zeetaagibwa era zirina okusonga ku elementi eriko ekyo id.

Bwe kiteekebwa mu nkola obulungi, nav yo oba ekibiina kyo eky’olukalala kijja kulongoosa okusinziira ku ekyo, okutambuza .activeekibiina okuva ku kintu ekimu okudda ku kirala okusinziira ku bigendererwa byabwe ebikwatagana.

Ebintu ebisobola okutambula n’okuyingira ku kibboodi

Bw’oba okola ekintu ekiyinza okutambula (okuggyako <body>), kakasa nti olina heightseti era overflow-y: scroll;n’ogisiigako —oku mabbali ga a tabindex="0"okukakasa nti kiiboodi eyingira.

Ssenda ekitundu wansi wa navbar era olabe enkyukakyuka ya kiraasi ekola. Ebintu ebigenda okukka wansi nabyo bijja kulagibwa.

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 navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>

Okugeza ne 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.

Ekintu 1

Ekintu 1-1

Ekintu 1-2

Ekintu 2

Ekintu 3

Ekintu 3-1

Ekintu 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Ekyokulabirako ne list-group

Scrollspy nayo ekola ne .list-groups. Ssenda ekitundu ekiriraanye ekibinja ky’olukalala era olabe enkyukakyuka ya kiraasi ekola.

Ekintu 1 Ekintu 2 Ekintu 3 Ekintu 4

Ekintu 1

Ekintu 2

Ekintu 3

Ekintu 4

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Enkozesa

Okuyita mu bikwata ku data

Okusobola okwanguyirwa okwongerako enneeyisa ya scrollspy ku topbar navigation yo, yongera data-bs-spy="scroll"ku elementi gy’oyagala okuketta (okusinga kino kyandibadde <body>). Oluvannyuma yongera ku data-bs-targetattribute ne ID oba class ya parent element ya Bootstrap .navcomponent yonna.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Okuyita mu JavaScript

Oluvannyuma lw’okugattako position: relative;mu CSS yo, yita scrollspy ng’oyita mu JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Ebiruubirirwa bya ID ebigonjoolwa byetaagisa

Enkolagana za Navbar zirina okuba n'ebigendererwa bya id ebisobola okugonjoolwa. Okugeza, a <a href="#home">home</a>erina okukwatagana n’ekintu mu DOM nga <div id="home"></div>.

Ebintu ebigendererwa ebitali birabika bibuusibwa amaaso

Ebintu ebigendererwa ebitalabika bijja kubuusibwa amaaso era ebintu byabwe ebya nav ebikwatagana tebijja kulagibwa.

Enkola

okuzza obuggya

Bw'oba okozesa scrollspy wamu n'okugattako oba okuggyawo ebintu okuva mu DOM, ojja kwetaaga okuyita enkola y'okuzza obuggya nga bwe kityo:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

okusuula

Esaanyaawo scrollspy ya elementi. (Eggyawo data eterekeddwa ku elementi ya DOM)

getEkyokulabirako

Enkola ya static ekusobozesa okufuna scrollspy instance ekwatagana ne DOM element

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getObaTondawoEkifaananyi

Enkola ya static ekusobozesa okufuna scrollspy instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-offset="".

Erinnya	Okuwandiika	Okukosamu	Okunnyonnyola
`offset`	omuwendo	`10`	Pixels oku offset okuva waggulu nga obala ekifo ky'omuzingo.
`method`	akaguwa	`auto`	Finds the section the sped element is in. `auto`ajja kulonda enkola esinga obulungi okufuna scroll coordinates. `offset`ejja kukozesa `Element.getBoundingClientRect()`enkola okufuna scroll coordinates. `position`ejja kukozesa eby'obugagga `HTMLElement.offsetTop`ne `HTMLElement.offsetLeft`okufuna ensengekera z'okutambula.
`target`	olunyiriri \| jEkintu ky'okubuuza \| Ekintu kya DOM		Laga elementi okukozesa Scrollspy plugin.

Ebibaddewo

Ekika ky’ekintu ekibaawo	Okunnyonnyola
`activate.bs.scrollspy`	Ekintu kino kikuba amasasi ku elementi y'omuzingo buli kintu ekipya lwe kifuuka ekikozesebwa scrollspy.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Ebiwandiiko ebiyitibwa Scrollspy

Engeri gye kikola

Ebintu ebisobola okutambula n’okuyingira ku kibboodi

Okugeza mu navbar

Omutwe ogusooka

Omutwe ogwokubiri

Omutwe ogw’okusatu

Omutwe ogw’okuna

Omutwe ogw’okutaano

Okugeza ne nested nav

Ekintu 1

Ekintu 1-1

Ekintu 1-2

Ekintu 2

Ekintu 3

Ekintu 3-1

Ekintu 3-2

Ekyokulabirako ne list-group

Ekintu 1

Ekintu 2

Ekintu 3

Ekintu 4

Enkozesa

Okuyita mu bikwata ku data

Okuyita mu JavaScript

Ebiruubirirwa bya ID ebigonjoolwa byetaagisa

Ebintu ebigendererwa ebitali birabika bibuusibwa amaaso

Enkola

okuzza obuggya

okusuula

getEkyokulabirako

getObaTondawoEkifaananyi

Eby’okulondako

Ebibaddewo