Skrol dɛn we de na di skrol
Ɔtomɛtik ɔpdet Bootstrap nevigishɔn ɔ list grup kɔmpɔnɛnt dɛn bays pan skrol pozishɔn fɔ sho us link de aktiv naw na di viupɔt.
Aw i de wok
Scrollspy gɛt sɔm tin dɛn we yu nid fɔ du fɔ mek i wok fayn fayn wan:
- I fɔ yuz pan wan Bootstrap nav kɔmpɔnɛnt ɔ list grup .
- Scrollspy nid
position: relative;pan di element we yu de spay pan, ɔltɛm di<body>. - Ankɔ (
<a>) nid ɛn dɛn fɔ pɔynt to wan ɛlimɛnt wit datid.
We dɛn dɔn impruv am fayn fayn wan, yu nav ɔ list grup go ɔpdet akɔdin to dat, ɛn dɛn go muv di .activeklas frɔm wan tin to di ɔda wan bay di tin dɛn we dɛn want fɔ du wit dɛn.
Kɔntena dɛn we yu kin skrol ɛn akses di kibɔd
If yu de mek kɔntena we yu kin skrol (ɔda pas di <body>), mek shɔ se yu gɛt wan heightsɛt ɛn overflow-y: scroll;put am pan am—alongsay a tabindex="0"fɔ mek shɔ se yu ebul fɔ yuz di kibɔd.
Ɛgzampul na navbar
Skrol di eria we de dɔŋ di navbar ɛn wach di aktif klas chenj. Di tin dɛn we de dɔŋ go aylayt bak.
Fɔs ɛd
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Sɛkɔn ɛd
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Tɔd ɛd
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Di nɔmba 4 edlayn
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Di nɔmba fayv edlayn
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
<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>
Example wit nested nav
Scrollspy de wok bak wit nested .navs. If wan nest .navde .active, in mama ɛn papa dɛnsɛf go bi .active. Skrol di eria nia di navbar ɛn wach di aktif klas chenj.
Aytem 1 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 1-1 we de sho aw fɔ du dis
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 1-2 we de sho aw fɔ du dis
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 2 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 3 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 3-1 fɔ di Baybul
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 3-2 we de sho aw fɔ du dis
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
<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>
Ɛgzampul wit list-grup
Scrollspy de wok bak wit .list-groups. Skrol di eria nia di list grup ɛn wach di aktif klas chenj.
Aytem 1 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 2 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 3 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
Aytem 4 we de sho aw fɔ du dat
Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.
<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>
Aw fɔ yuz am
Via data atribyut dɛn
Fɔ mek i izi fɔ ad skrolspi bihayvya to yu tɔpba nevigishɔn, ad data-bs-spy="scroll"to di ɛlimɛnt we yu want fɔ spay pan (mɔs tipikli dis go bi di <body>). Dɔn ad di data-bs-targetatribyut wit di ID ɔ klas fɔ di mama ɛn papa ɛlimɛnt fɔ ɛni Bootstrap .navkɔmpɔnɛnt.
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>
Yu kin yuz JavaSkript fɔ yuz am
Afta yu dɔn ad position: relative;yu CSS, kɔl di skrol dɛn bay JavaSkript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Risolvable ID target dɛn nid fɔ de
Navbar link dɛn fɔ gɛt id target dɛn we dɛn kin sɔlv. Fɔ ɛgzampul, a <a href="#home">home</a>fɔ kɔrɛkt to sɔntin we de na di DOM lɛk <div id="home"></div>.
Nɔn-visible target elements ignore
Target elements we nɔ de si go ignore ɛn dɛn kɔrɛspɔndɛns nav aytem dɛn nɔ go ɛva aylayt.
Di we aw dɛn de du am
fɔ mek yu fil fayn
We yu de yuz scrollspy in kɔnjɔkt wit ad ɔ pul ɛlimɛnt dɛn frɔm di DOM, yu go nid fɔ kɔl di rifresh we lɛk so:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
fɔ trowe am
Destroy wan element in skrol spy. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
getInstans fɔ di wan dɛn we de
Statik we de alaw yu fɔ gɛt di skrol instans we gɛt fɔ du wit wan DOM ɛlimɛnt
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getƆKriɛtInstans
Statik we de alaw yu fɔ gɛt di skrol instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we i nɔ bin initialize
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Di tin dɛn we yu kin pik fɔ du
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-, lɛk insay data-bs-offset="".
| Nem | Kayn | Balans | Tɔk bɔt |
|---|---|---|---|
offset |
nɔmba | 10 |
Piksɛl dɛn fɔ ɔfset frɔm ɔp we yu de kɔl di pozishɔn fɔ skrol. |
method |
rop | auto |
Fɛn us sɛkshɔn di spay ɛlimɛnt de insay.go autopik di bɛst we fɔ gɛt skrol kɔdinɛt dɛn. offsetgo yuz di Element.getBoundingClientRect()we fɔ gɛt skrol kɔdinɛt dɛn. positiongo yuz di HTMLElement.offsetTopɛn HTMLElement.offsetLeftprɔpati dɛn fɔ gɛt skrol kɔdinɛt dɛn. |
target |
string fɔ di wan dɛn we de | jKwɛri ɔbjɛkt | DOM elemɛnt | Spesifiket elemɛnt fɔ aplay Scrollspy plɔgin. |
Di tin dɛn we kin apin
| Di kayn tin we apin | Tɔk bɔt |
|---|---|
activate.bs.scrollspy |
Dis ivent de faya pan di skrol ɛlimɛnt ɛnitɛm we di skrol spy mek nyu tin aktiv. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})