Scrollspy ye
Bootstrap navigation walima list group components kuraya i yɛrɛma ka da scroll position kan walasa k’a jira link min bɛ baara la sisan viewport kɔnɔ.
A bɛ baara kɛ cogo min na
Scrollspy bɛ ni wajibi damadɔw ye walasa ka baara kɛ ka ɲɛ:
- a ka kan ka baara kɛ Bootstrap nav yɔrɔ dɔ kan walima lisi kulu dɔ kan .
- Scrollspy bɛ ɲini
position: relative;fɛn min kan i bɛ ka sɛgɛsɛgɛli kɛ, a ka c’a la, o ye<body>. - Ankɔri (
<a>) wajibiyalen don wa u ka kan ka fɛn dɔ jira ni o yeid.
Ni a waleyara ka ɲɛ, i ka nav walima list kulu bɛna kuraya ka kɛɲɛ n’o ye, ka .activekalasi bɔ fɛn dɔ la ka taa fɛn wɛrɛ la ka da u ni ɲɔgɔn cɛ laɲiniw kan.
Minɛn minnu bɛ se ka wuli ani klaviyeti doncogo
N’i bɛ minɛn dɔ dilan min bɛ se ka wuli (n’o tɛ <body>), i jija ka heightseti dɔ sɔrɔ ani overflow-y: scroll;ka a kɛ—a kɛrɛfɛ tabindex="0"walasa ka se ka klaviyeti sɔrɔ.
Misali la navbar kɔnɔ
I ka yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ. Fɛn minnu bɛ bɔ duguma, olu fana bɛna jira.
Kumakun fɔlɔ
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Kumakun filanan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Kumakun sabanan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Kumakun naaninan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Kumakun duurunan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
<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>
Misali ni nested nav
Scrollspy fana bɛ baara Kɛ ni nested .navs ye. ni nested .navye .active, a bangebagaw fana bɛna kɛ .active. Yɔrɔ min bɛ navbar kɛrɛfɛ, i ka o lajɛ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ.
Fɛn 1nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 1-1nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 1-2nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 2nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 3nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 3-1nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 3-2nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
<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>
Misali ni list-group ye
Scrollspy fana bɛ baara kɛ ni .list-groups ye. Yɔrɔ min bɛ lisi kulu kɛrɛfɛ, i ka o yɔrɔ lajɛ ani ka kalansen caman yeli lajɛ min bɛ baara la.
Fɛn 1nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 2nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 3nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
Fɛn 4nan
Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.
<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>
Baarakɛcogo
Ka tɛmɛn donanw ka fɛnw kan
Walasa ka scrollspy kɛcogo fara nɔgɔya la i ka topbar navigation kan, data-bs-spy="scroll"i b’a fɛ ka spy min kɛ, i ka fara o kan (a ka c’a la nin bɛna kɛ <body>). O kɔ fɛ, i bɛ fɛn in Fàra a kan data-bs-targetni Bootstrap .navyɔrɔ o yɔrɔ bangebaga-yɔrɔ ID walima a kalasi ye.
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>
JavaScript fɛ
I kɛlen kɔ ka fara position: relative;i ka CSS kan, i ka scrollspy wele JavaScript fɛ:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
ID laɲiniw minnu bɛ se ka ɲɛnabɔ, olu wajibiyalen don
Navbar jɛgɛnw ka kan ka kɛ ni id laɲiniw ye minnu bɛ se ka ɲɛnabɔ. Misali la, a <a href="#home">home</a>ka kan ka bɛn fɛn dɔ ma DOM kɔnɔ i n’a fɔ <div id="home"></div>.
Laɲinifɛn minnu tɛ ye, olu ma jate
Laɲinifɛnw minnu tɛ ye, olu bɛna jate ani u nav fɛnw minnu bɛ bɛn o ma, olu tɛna jira abada.
Fɛɛrɛw
ka farikolo lafiya
Ni aw bɛ baara kɛ ni scrollspy ye ka fara fɛnw farali walima u bɔli kan DOM kɔnɔ, aw bɛna a ɲini ka refresh fɛɛrɛ wele i n’a fɔ:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
ka a fili
A bɛ element dɔ ka scrollspy tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance ye
Static method min b’a to i bɛ se ka scrollspy instance sɔrɔ min bɛ tali kɛ DOM element dɔ la
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
sɔrɔWala ka Instance Dabɔ
Static method min b’a To i bɛ se ka scrollspy instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma Daminɛ
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Sugandili minnu bɛ kɛ
Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-offset="".
| Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
|---|---|---|---|
offset |
nimɔrɔ | 10 |
Pixels ka offset ka bɔ sanfɛ ni jatebɔ jɔyɔrɔ scroll. |
method |
gaari | auto |
A bɛ sɔrɔ yɔrɔ min na spyed element bɛ yɔrɔ min na.a autobɛna fɛɛrɛ ɲuman sugandi walasa ka scroll coordinates sɔrɔ. offsetbɛna baara kɛ ni Element.getBoundingClientRect()fɛɛrɛ ye walasa ka scroll coordinates sɔrɔ. positionbɛna baara kɛ ni HTMLElement.offsetTopani HTMLElement.offsetLeftproperties ye walasa ka scroll coordinates sɔrɔ. |
target |
juru | jQuery fɛn | DOM yɔrɔ | A bɛ fɛn dɔ jira min bɛna Scrollspy plugin waleya. |
Ko minnu kɛra
| Ko kɛlen suguya | Cogojirali |
|---|---|
activate.bs.scrollspy |
O ko in bɛ tasuma Bɔ sɛbɛnfura yɔrɔ la tuma o tuma ni fɛn kura dɔ Kɛra baara la sɛbɛnfura fɛ. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})