Agbalẽxatsaxatsa

Trɔ asi le Bootstrap ƒe mɔfiame ŋu le ɖokuiwò si alo ŋlɔ ƒuƒoƒo ƒe akpawo ɖe agbalẽxatsaxatsa ƒe nɔƒe dzi be nàfia kadodo si le dɔ wɔm fifia le nukpɔkpɔƒea.

Le axa sia dzi

Ale si wòwɔa dɔe

Nudidi ʋɛ aɖewo le Scrollspy si be wòawɔ dɔ nyuie:

Ele be woazãe le Bootstrap nav component alo list group dzi .
Scrollspy bia position: relative;tso element si dzi nèle ŋku lém ɖo la dzi, zi geɖe la, <body>.
Sekewo ( <a>) hiã eye ele be woafia asi element aɖe si me ema le id.

Ne wowɔe dzidzedzetɔe la, wò nav alo list ƒuƒoƒoa awɔ yeye ɖe edzi, atsɔ .activeklass la tso nu ɖeka me ayi bubu dzi le woƒe taɖodzinu siwo do ƒome kplii nu.

Nugoe siwo woate ŋu aʋu kple keyboard ƒe mɔɖeɖe

Ne èle nugoe si woate ŋu aʋu (si menye , o <body>) wɔm la, kpɔ egbɔ be yewɔ heightɖoɖo ɖe eŋu eye overflow-y: scroll;nètsɔe de eme—kple a tabindex="0"be nàkpɔ egbɔ be keyboard la ate ŋu age ɖe eme.

Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woaɖe nusiwo le fli dzi la hã afia.

Tanya gbãtɔ

Esia nye teƒe aɖewo ƒe nyawo na scrollspy ƒe axaa. De dzesii be ne èle axaa dzi yim la, mɔfianu si sɔ la adze. Wogbugbɔe gblɔna le akpaa ƒe kpɔɖeŋu bliboa me. Míeyia edzi tsɔa kpɔɖeŋu ƒe kɔpi bubu aɖewo kpena ɖe eŋu le afisia be míate gbe ɖe agbalẽxatsaxatsa kple nuŋɔŋlɔa dzi.

Tanya evelia

Tanya etɔ̃lia

Tanya enelia

Tanya atɔ̃lia

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

Kpɔɖeŋu kple nested nav

Scrollspy hã wɔa dɔ kple nested .navs. Ne nested .navnye la .active, edzilawo hã anye .active. Ʋu teƒe si le navbar la xa eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ.

Nyati 1 lia

Nyati 1-1 lia

Nyati 1-2 lia

Nyati 2 lia

Nyati 3 lia

Nyati 3-1 lia

Nyati 3-2 lia

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

Kpɔɖeŋu kple list-group

Scrollspy hã wɔa dɔ kple .list-groups. Ʋu teƒe si le xexlẽdzesiwo ƒe ƒuƒoƒoa xa eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ.

Nyati 1 lia Nyati 2 lia Nyati 3 lia Nyati 4 lia

Nyati 1 lia

Nyati 2 lia

Nyati 3 lia

Nyati 4 lia

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

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar ƒe mɔfiame ŋu bɔbɔe la, tsɔ kpe data-bs-spy="scroll"ɖe nusi nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>). Emegbe nàtsɔ data-bs-targetnɔnɔmea akpe ɖe Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe ID alo klass ŋu .nav.

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>

To JavaScript dzi

Ne ètsɔ position: relative;wò CSS kpe ɖe eŋu vɔ la, yɔ agbalẽxatsaxatsa la to JavaScript dzi:

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

ID ƒe taɖodzinu siwo gbɔ woate ŋu akpɔ gbɔ hiã

Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Navbar kadodowo me. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>nasɔ kple nane si le DOM la me abe <div id="home"></div>.

Woŋe aɖaba ƒu taɖodzinu ƒe akpa siwo womekpɔna o dzi

Woaŋe aɖaba aƒu taɖodzinu ƒe akpa siwo womekpɔna o dzi eye womaɖe woƒe nav nu siwo sɔ ɖe enu la afia gbeɖe o.

Mɔnuwo

gbɔdzɔe ame

Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:

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

tsɔe ƒu gbe

Tsrɔ̃a element aɖe ƒe scrollspy. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)

xɔKpɔɖeŋu

Static mɔnu si ɖea mɔ na wò be nàxɔ scrollspy ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe

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

xɔAloWɔwɔKpɔɖeŋu

Static mɔnu si ɖea mɔ na wò be nàxɔ scrollspy ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, alo awɔ yeye nenye be womedze egɔme o

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-bs-, abe alesi wòle le data-bs-offset="".

Ŋkɔ	Ƒomevi	Gᴐmedzeƒe	Nuɖᴐɖᴐ
`offset`	xexlẽdzesi	`10`	Pixels siwo woatsɔ atso dzi ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu.
`method`	ka	`auto`	Finds which section the sped element is in. `auto`atia mɔnu nyuitɔ kekeake si dzi woato axɔ agbalẽxatsaxatsa ƒe nɔnɔmetatawo. `offset`azã `Element.getBoundingClientRect()`mɔnua atsɔ axɔ agbalẽxatsaxatsa ƒe nɔnɔmetatawo. `position`azã `HTMLElement.offsetTop`kple `HTMLElement.offsetLeft`ƒe nɔnɔmewo atsɔ axɔ agbalẽxatsaxatsa ƒe nɔnɔmetatawo.
`target`	kaƒoƒo \| jQuery ƒe nu \| DOM ƒe akpa aɖe		Tsɔ element si woatsɔ awɔ Scrollspy ƒe kpeɖeŋutɔ ŋudɔ.

Nudzɔdzɔwo

Nudzɔdzɔ ƒomevi	Nuɖᴐɖᴐ
`activate.bs.scrollspy`	Nudzɔdzɔ sia doa dzo ɖe agbalẽxatsaxatsa ƒe akpaa dzi ɣesiaɣi si nu yeye aɖe va le dɔ wɔm to agbalẽxatsaxatsa la dzi.

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

Agbalẽxatsaxatsa

Ale si wòwɔa dɔe

Nugoe siwo woate ŋu aʋu kple keyboard ƒe mɔɖeɖe

Kpɔɖeŋu le navbar me

Tanya gbãtɔ

Tanya evelia

Tanya etɔ̃lia

Tanya enelia

Tanya atɔ̃lia

Kpɔɖeŋu kple nested nav

Nyati 1 lia

Nyati 1-1 lia

Nyati 1-2 lia

Nyati 2 lia

Nyati 3 lia

Nyati 3-1 lia

Nyati 3-2 lia

Kpɔɖeŋu kple list-group

Nyati 1 lia

Nyati 2 lia

Nyati 3 lia

Nyati 4 lia

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

To JavaScript dzi

ID ƒe taɖodzinu siwo gbɔ woate ŋu akpɔ gbɔ hiã

Woŋe aɖaba ƒu taɖodzinu ƒe akpa siwo womekpɔna o dzi

Mɔnuwo

gbɔdzɔe ame

tsɔe ƒu gbe

xɔKpɔɖeŋu

xɔAloWɔwɔKpɔɖeŋu

Tiatiawɔblɔɖewo

Nudzɔdzɔwo