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 .active
kalasi 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 height
seti dɔ sɔrɔ ani overflow-y: scroll;
ka a kɛ a kan—a kɛrɛfɛ tabindex="0"
walasa ka se ka klaviyeti sɔrɔ.
Misali la navbar kɔnɔ
Aw ye yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o yeli ye. 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 .nav
s ye. ni nested .nav
ye .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-group
s 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
Donanw ka fɛnɲɛnɛmaw fɛ
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-target
ni Bootstrap .nav
yɔ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ɛn minnu tɛ ye, olu bɛna jate ani u nav fɛn minnu bɛ bɛn o ma, olu tɛna jira abada.
Fɛɛrɛw
ka farikolo lafiya
Ni i bɛ baara kɛ ni scrollspy ye ka fara fɛnw farali walima u bɔli kan DOM kɔnɔ, i 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 auto bɛna fɛɛrɛ ɲuman sugandi walasa ka scroll coordinates sɔrɔ. offset bɛna baara kɛ ni Element.getBoundingClientRect() fɛɛrɛ ye walasa ka scroll coordinates sɔrɔ. position bɛna baara kɛ ni HTMLElement.offsetTop ani HTMLElement.offsetLeft properties 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...
})