Scrollspy
Otomatikman mete ajou navigasyon Bootstrap oswa lis eleman gwoup ki baze sou pozisyon woulo liv la pou endike ki lyen ki aktif kounye a nan fenèt la.
Ki jan li fonksyone
Scrollspy gen kèk kondisyon pou fonksyone byen:
- Li dwe itilize sou yon eleman nav Bootstrap oswa yon gwoup lis .
- Scrollspy mande
position: relative;sou eleman w ap espyonaj la, anjeneral,<body>. - Yo mande lank (
<a>) epi yo dwe montre yon eleman ki gen said.
Lè yo aplike avèk siksè, nav oswa gwoup lis ou a pral mete ajou kòmsadwa, deplase .activeklas la soti nan yon atik nan yon lòt ki baze sou objektif ki asosye yo.
Kontenè defilable ak aksè klavye
Si w ap fè yon veso defilable (ki pa <body>), asire w ke ou gen yon heightseri epi overflow-y: scroll;aplike nan li-ansanm ak yon tabindex="0"pou asire aksè klavye.
Egzanp nan navbar
Scroll zòn ki anba a navbar epi gade chanjman nan klas aktif. Atik dropdown yo pral make tou.
Premye tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Dezyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Twazyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Katriyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Senkyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
<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>
Egzanp ak enbrike nav
Scrollspy travay tou ak .navs enbrike. Si yon enbrike .navse .active, paran li yo pral tou .active. Scroll zòn nan akote navbar la epi gade chanjman nan klas aktif.
Atik 1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 1-1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 1-2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 3
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 3-1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 3-2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
<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>
Egzanp ak gwoup lis
Scrollspy travay tou ak .list-groups. Scroll zòn ki akote gwoup lis la epi gade chanjman nan klas aktif.
Atik 1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 3
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 4
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
<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>
Itilizasyon
Via atribi done yo
Pou ajoute fasilman konpòtman scrollspy nan navigasyon topbar ou a, ajoute data-bs-spy="scroll"nan eleman ou vle al rekonèt (pi tipikman sa a ta dwe <body>). Lè sa a, ajoute data-bs-targetatribi a ak ID oswa klas eleman paran nenpòt .naveleman Bootstrap.
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>
Via JavaScript
Apre w fin ajoute position: relative;CSS ou a, rele scrollspy via JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Objektif ID ki ka rezoud yo mande yo
Lyen Navbar yo dwe gen sib id ki ka rezoud. Pou egzanp, yon <a href="#home">home</a>dwe koresponn ak yon bagay nan DOM la tankou <div id="home"></div>.
Eleman sib ki pa vizib inyore
Eleman sib ki pa vizib yo pral inyore epi atik navigasyon korespondan yo p ap janm make.
Metòd
rafrechi
Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
jete
Detwi scrollspy yon eleman. (Retire done ki estoke sou eleman DOM)
getInstance
Metòd estatik ki pèmèt ou jwenn egzanp scrollspy ki asosye ak yon eleman DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Metòd estatik ki pèmèt ou jwenn egzanp scrollspy ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Opsyon
Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-, tankou nan data-bs-offset="".
| Non | Kalite | Default | Deskripsyon |
|---|---|---|---|
offset |
nimewo | 10 |
Piksèl pou konpanse nan tèt lè w ap kalkile pozisyon woulo liv la. |
method |
fisèl | auto |
Jwenn nan ki seksyon eleman espyon an ye. autopral chwazi pi bon metòd pou jwenn kowòdone woulo liv la. offsetpral sèvi ak Element.getBoundingClientRect()metòd la pou jwenn kowòdone woulo liv. positionpral sèvi HTMLElement.offsetTopak HTMLElement.offsetLeftpwopriyete yo ak pou jwenn kowòdone woulo liv. |
target |
fisèl | jQuery objè | Eleman DOM | Espesifye eleman pou aplike Plugin Scrollspy. |
Evènman
| Kalite evènman | Deskripsyon |
|---|---|
activate.bs.scrollspy |
Evènman sa a dife sou eleman woulo liv la chak fwa yon nouvo atik vin aktive pa scrollspy la. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})