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.

Fuula kana irratti

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 qabu id.

Yeroo milkaa'inaan hojiirra oolu, gareen nav ykn tarree kee akkaataa kanaan ni haaromsa, .activegalmoota 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>), heighttuuta qabaachuu fi overflow-y: scroll;irratti hojiirra oolchuu kee mirkaneessi-a cinatti tabindex="0"qaqqabummaa kiiboordii mirkaneessuuf.

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

Mata duree sadaffaa

Mata duree afraffaan

Mata duree shanaffaa

<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 .navs wajjin hojjeta. Yoo nested .navta'e .activewarri isaas ni ta'u .active. Naannoo navbar cina jiru garagalchiiti jijjiirama gita socho'aa ilaali.

Qabxii 1.

Qabxii 1-1

Qabxii 1-2

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 3-1

Qabxii 3-2

<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-groups wajjin hojjeta. Naannoo garee tarree cinaa jiru garagalchiiti jijjiirama gita socho'aa ilaali.

Qabxii 1. Qabxii 2ffaa Qabxii 3ffaa Qabxii 4.

Qabxii 1.

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 4.

<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-targetamalli 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()positionHTMLElement.offsetTopHTMLElement.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...
})

Scrollspy jechuun kan beekamu

Akkaataa itti hojjetu

Qabduulee garagalfamuu danda'anii fi qaqqabummaa kiiboordii

Fakkeenya navbar keessatti

Mata duree jalqabaa

Mata duree lammaffaa

Mata duree sadaffaa

Mata duree afraffaan

Mata duree shanaffaa

Fakkeenya nav nested wajjin

Qabxii 1.

Qabxii 1-1

Qabxii 1-2

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 3-1

Qabxii 3-2

Fakkeenya tarree-garee waliin

Qabxii 1.

Qabxii 2ffaa

Qabxii 3ffaa

Qabxii 4.

Fayyadama

Karaa amaloota deetaa

Karaa JaavaScript

Target ID furmaata argachuu danda'an barbaachisa

Qaamolee galma hin mul'anne tuffataman

Malawwan

haaromsaa

gatuu

Fakkeenya argadhu

Fakkeenya argadhuYknUumi

Filannoowwan

Taateewwan