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.
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 leid
.
Ne wowɔe dzidzedzetɔe la, wò nav alo list ƒuƒoƒoa awɔ yeye ɖe edzi, atsɔ .active
klass 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.
Kpɔɖeŋu le navbar me
Ʋ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
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 etɔ̃lia
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 enelia
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 atɔ̃lia
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.
<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 .nav
s. Ne nested .nav
nye 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
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.
Nyati 1-1 lia
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.
Nyati 1-2 lia
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.
Nyati 2 lia
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.
Nyati 3 lia
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.
Nyati 3-1 lia
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.
Nyati 3-2 lia
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.
<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-group
s. Ʋ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
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.
Nyati 2 lia
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.
Nyati 3 lia
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.
Nyati 4 lia
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.
<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-target
nɔ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...
})