Scrollspy jechuun kan beekamu
Hidhaa kamtu yeroo ammaa buufata ilaalchaa keessatti socho'aa akka jiru agarsiisuuf bakka tarree irratti hundaa'uun qaamolee garee tarree ykn qaamolee garee tarree ofumaan fooyyessa.
Akkaataa itti hojjetu
Scrollspy sirnaan hojjechuuf wantoota muraasa barbaachisa:
- Qaama nav Bootstrap ykn garee tarree irratti fayyadamuu qaba .
- Scrollspy
position: relative;
elementii ati basaastu irratti barbaada, yeroo baay'ee kan<body>
. - Anchors (
<a>
) barbaachisoo fi elementii sana waliin agarsiisuu qabuid
.
Yeroo milkaa'inaan hojiirra oolu, gareen nav ykn tarree kee akkaataa kanaan ni haaromsa, .active
galmoota isaanii walqabatan irratti hundaa'uun gita wanta tokko irraa gara isa itti aanutti sochoosa.
Qabduulee garagalfamuu danda'anii fi qaqqabummaa kiiboordii
Yoo qabduu garagalfamuu danda'u hojjechaa jirta ta'e (kan ala <body>
), height
tuuta qabaachuu fi overflow-y: scroll;
irratti hojiirra oolchuu kee mirkaneessi-a cinatti tabindex="0"
qaqqabummaa kiiboordii mirkaneessuuf.
Fakkeenya navbar keessatti
Naannoo navbar jala jiru garagalchiiti jijjiirama gita socho'aa ilaali. Wantoonni gadi bu'an akkasumas ni calaqqisu.
Mata duree jalqabaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Mata duree lammaffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Mata duree sadaffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Mata duree afraffaan
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Mata duree shanaffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
<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>
Fakkeenya nav nested wajjin
Scrollspy akkasumas nested .nav
s wajjin hojjeta. Yoo nested .nav
ta'e .active
warri isaas ni ta'u .active
. Naannoo navbar cina jiru garagalchiiti jijjiirama gita socho'aa ilaali.
Qabxii 1.
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 1-1
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 1-2
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 2ffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 3ffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 3-1
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 3-2
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
<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>
Fakkeenya tarree-garee waliin
Scrollspy akkasumas .list-group
s wajjin hojjeta. Naannoo garee tarree cinaa jiru garagalchiiti jijjiirama gita socho'aa ilaali.
Qabxii 1.
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 2ffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 3ffaa
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
Qabxii 4.
Kun qabiyyee iddooqa tokko tokkoo fuula scrollspy tiif. Hubadhu, yeroo fuula gadi garagalchitu, hidhiin qajeelchaa sirrii ta'e akka calaqqisu. Fakkeenya qaama guutuu keessatti irra deddeebi'ameera. Asitti waraabbii fakkeenyaa dabalataa tokko tokko dabaluu itti fufna, kunis garagalchuu fi calaqqisiisuu cimsuuf.
<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>
Fayyadama
Karaa amaloota deetaa
Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-bs-spy="scroll"
elementii basaasuu barbaaddutti dabali (baay'inaan kun kan ta'a <body>
). Sana booda data-bs-target
amalli ID ykn gita qaama warraa qaama Bootstrap kamiyyuu waliin dabali .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>
Karaa JaavaScript
CSS keessan keessatti erga dabaltanii booda position: relative;
, karaa JavaScript scrollspy waami:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Target ID furmaata argachuu danda'an barbaachisa
Hidhamtoonni Navbar galmoota id furmaata argachuu danda'an qabaachuu qabu. Fakkeenyaaf, a <a href="#home">home</a>
waan DOM keessa jiru akka <div id="home"></div>
.
Qaamolee galma hin mul'anne tuffataman
Qaamonni galmee hin mul'anne ni tuffatamu fi wantoonni nav isaanii walgitan gonkumaa hin calaqqisan.
Malawwan
haaromsaa
Yeroo scrollspy fayyadamtu elementoota DOM irraa dabaluu ykn haquu wajjin walqabatee, mala haaromsaa akkasitti waamuun si barbaachisa:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
gatuu
Scrollspy elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
Fakkeenya argadhu
Mala istaatiksii kan fakkeenya scrollspy elementii DOM waliin walqabate argachuuf si dandeessisu
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Fakkeenya argadhuYknUumi
Mala istaatiksii kan fakkeenya scrollspy elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-
, akkuma keessatti dabali data-bs-offset=""
.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
offset |
lakkoofsa | 10 |
Piikseelota yeroo iddoo tarree shallagdu gubbaa irraa ofseeti. |
method |
hidhaa | auto |
Qabeentiin basaafame kutaa kam keessa auto akka jiru barbaada.Qindeessitoota qaxxaamuraa argachuuf mala hundarra gaarii ta'e ni filata. qindeessoota tarree argachuuf mala offset fayyadama . qindaa'inoota qaxxaamuraa argachuuf qabeentota fi fayyadama .Element.getBoundingClientRect() position HTMLElement.offsetTop HTMLElement.offsetLeft |
target |
tarree | jWanti gaaffii | Qaama DOM | Qaama ifteessa Scrollspy plugin hojii irra oolchuuf. |
Taateewwan
Gosa taatee | Ibsa |
---|---|
activate.bs.scrollspy |
Taatee kun yeroo wanti haaraan scrollspy'n hojiirra oolu hunda elementii tarree irratti dhukaasa. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})