in English

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:

  • Yoo JavaScriptutil.js keenya madda irraa ijaaraa jirta ta'e, .
  • Qaama nav Bootstrap ykn garee tarree irratti fayyadamuu qaba .
  • Scrollspy position: relative;elementii ati basaastu irratti barbaada, yeroo baay'ee kan <body>.
  • Yeroo elementoota , malee biroo basaastu , tuuta qabaachuu fi hojiirra oolchuu <body>kee mirkaneessi .heightoverflow-y: scroll;
  • 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.

Fakkeenya navbar keessatti

Naannoo navbar jala jiru garagalchiiti jijjiirama gita socho'aa ilaali. Wantoonni gadi bu'an akkasumas ni calaqqisu.

@furdaa

Qabiyyee iddooqa fakkeenya scrollspy tiif. Arkiteekcharii isa gaarii ta'e argatte. Chaappaa paaspoortii, isheen kosmoopoolitaan dha. Gaarii, haaraa, hamaa, qulfii irratti arganne. Gaaf tokko akkan si dhaba jedhee karoorfadhee hin beeku. Garaa kee nyaattee baafti. Dhungannaan kee koosmii dha, sochiin hundi sihiiti. Warra jechuu kooti, ​​akka isheen taate jechuu kooti. Nagaa nagaan jaallattan imala haa fudhannu. Halkan akka 4th of July qofa abbummaan qaba! Garuu qisaasamamuu siif wayya.

@mdo jedhaa

Qabiyyee iddooqa fakkeenya scrollspy tiif. 'Cause isheen musee fi artistiidha. (Akkasitti hojjenna) Kanaafuu falfalaan taphachuu barbaadda. Kanaafuu osoo hunda naaf hin kenniin dura qofa mirkaneeffadhu. Ani deemaa jira, qilleensarra deemaa jira (halkan kana). Haasaa darbi, hunda dhaga'e, yeroon deemsa deemsa.

tokko

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Qabiyyee iddooqa fakkeenya scrollspy tiif. Yoo shubbisuu barbaadde, yoo hunda barbaadde, ani intala ati bilbiluu qabdu akkan ta'e beekta. Obomboleettii ani barbaadu keessa deemaa. Kanaafuu mee suutii guyyaa dhaloota keetiin siif haa fidu. Kan baqate. Jimaata darbe halkan, eeyyee seera cabsinee natti fakkaata, yeroo hunda ni dhaabna jedhi. 'Cause isheen xiqqoo Yoko, Akkasumas xiqqoo 'Oh no' dha. Ani jaw droppin', ija poppin', mataa turnin', qaama shockin' barbaada. Eeyyee, kaardii liqii keenya max goone mana dhugaatii keessaa ari'amne.

Akkasumas qabiyyee iddoo qabachuu tokko tokko dabalataa, safartuu gaariidhaaf.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</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.

Qabiyyee iddooqa fakkeenya scrollspy tiif. This one relates to item 1. Olka'iinsa maayilii, akkas ol si fudhata, 'sababni isaas isheen kolfa idil-addunyaa tokko sana waan qabduuf. Siree koo keessa ormi tokko jira, mataa koo keessa dha'aan jira. Yaa lakki. Jireenya biraa keessatti akka turtu si taasisa ture. 'Cause ani, ani waanuma fedheef dandeettii qaba. Lola gonfoo kootiif mijachuu. Dhugaatii warra kee hattee gara mana gubbaatti ol ba'uuf kan itti fayyadamte. Tone, tan fit fi qophaa'aa, garagalchuu it up cause its gettin 'heavy. Jaalalli ishee akka qoricha sammuu namaa hadoochuuti. Filannoo akkan qabu dagadheera jedheen tilmaama.

Qabxii 1-1

Qabiyyee iddooqa fakkeenya scrollspy tiif. Inni kun qabxii 1-1 wajjin wal qabata. Arkiteekcharii isa gaarii ta'e argatte. Chaappaa paaspoortii, isheen kosmoopoolitaan dha. Gaarii, haaraa, hamaa, qulfii irratti arganne. Gaaf tokko akkan si dhaba jedhee karoorfadhee hin beeku. Garaa kee nyaattee baafti. Dhungannaan kee koosmii dha, sochiin hundi sihiiti. Warra jechuu kooti, ​​akka isheen taate jechuu kooti. Nagaa nagaan jaallattan imala haa fudhannu. Halkan akka 4th of July qofa abbummaan qaba! Garuu qisaasamamuu siif wayya.

Qabxii 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Qabiyyee iddooqa fakkeenya scrollspy tiif. Inni kun qabxii 3-2 wajjin wal qabata. Ati orijinaala dha, bakka buufamuu hin danda'u. Halkan guutuu taphachaa jiru, sirba kee. Shamarran Kaalifoorniyaa nuti hin haalamne. Akka simbirroo godoo hin qabneetti. Amma sodaan hin jiru gadi dhiisi bilisa ta'i qofa, haalduree tokko malee si jaalladha. Barreeffama dallaa irratti barreeffame nan arga. Addunyaa irra naanna'uu dandeessa garuu wanti qarqara galaanaa warqeetti dhihaatu hin jiru.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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.

Qabiyyee iddooqa fakkeenya tarree-garee scrollspy. This one relates to item 1. Dhiifama hin barbaachisu. Amma sodaan hin jiru gadi dhiisi bilisa ta'i qofa, haalduree tokko malee si jaalladha. Jimaata darbe halkan. Hin qaanfatin kinda guy bareedaadha jedheen bet godha. Ganna mana barumsaa sadarkaa lammaffaa booda yeroo jalqabaaf wal argine. 'Cause isheen musee fi artistiidha. Maal? Eegi. Ani waanan ala ta'e jedhee yaade.

Qabxii 2ffaa

Qabiyyee iddooqa fakkeenya tarree-garee scrollspy. This one relates to item 2. Eeyyee, dha'annaa mataa isheetiin shubbisti. Yaa lakki. Silaa isa guddaa ta'uu dandeessa turte. 'Sababni isaas daa'ima, ati ibiddaadha. Tarii sababa balballi hundi cufamuuf ta'uu danda'a. Garaa kee baniitii akka jalqabu qofaaf hayyami. Kanaaf très chic, eeyyee, isheen classic dha.

Qabxii 3ffaa

Qabiyyee iddooqa fakkeenya tarree-garee scrollspy. Inni kun qabxii 3ffaa wajjin wal qabata.Ol’inaan deemna. Tokko isa kaan malee gonkumaa hin taane, waliigaltee uumne. Qilleensarra deemaa jira. Namni tokko tattoo kee irraa buqqifte jedhe. Amma akka qilxuutti lola'aa jira. Tone, tan fit fi qophaa'aa, garagalchuu it up cause its gettin 'heavy. Sababni isaas al tokko kan koo taate, al tokko kan koo taate. Ifa qabsiistee akka ifu qofa gotta! Kanaaf daandii guddaa sana rukunne. Sitti dhaga'amee beekaa, akkas waraqaa qalla'aa sitti dhaga'ama. Hundaa nan arga, amma nan arga.

Qabxii 4.

Qabiyyee iddooqa fakkeenya tarree-garee scrollspy. This one relates to item 4. Ganna mana barumsaa sadarkaa lammaffaa booda yeroo jalqabaaf wal argine. Amma sodaan hin jiru gadi dhiisi bilisa ta'i qofa, haalduree tokko malee si jaalladha. Gogaa aduudhaan dhungate akka malee ho'aa ta'ee popsicle keessan ni balleessina. Jaalalli kun akka levitate si taasisa.

<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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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-spy="scroll"elementii basaasuu barbaaddutti dabali (baay'inaan kun kan ta'a <body>). Sana booda data-targetamalli ID ykn gita qaama warraa qaama Bootstrap kamiyyuu waliin dabali .nav.

body {
  position: relative;
}

<body data-spy="scroll" data-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:

$('body').scrollspy({ 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 :visiblegalma hin taane tuffataman

Qaamonni galmee :visibleakkaataa jQuery hin taane ni tuffatamu fi wantoonni nav isaanii walgitan gonkumaa hin calaqqisan.

Malawwan

.scrollspy('refresh')

Yeroo scrollspy fayyadamtu elementoota DOM irraa dabaluu ykn haquu wajjin walqabatee, mala haaromsaa akkasitti waamuun si barbaachisa:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Scrollspy elementii tokkoo ni balleessa.

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset="".

Maqaa Akaakuu Durtii dha Ibsa
ofseeti jechuun ni danda’ama lakkoofsa 10. Piikseelota yeroo iddoo tarree shallagdu gubbaa irraa ofseeti.
mala hidhaa auto Qabeentiin basaafame kutaa kam keessa autoakka jiru barbaada.Qindeessitoota qaxxaamuraa argachuuf mala hundarra gaarii ta'e ni filata. offsetqindeessoota garagalchuu argachuuf mala ofseeti jQuery fayyadama. positionqindeessoota tarree argachuuf mala iddoo jQuery fayyadama.
xiyyeeffaanoo tarree | jWanti gaaffii | Qaama DOM Qaama ifteessa Scrollspy plugin hojii irra oolchuuf.

Taateewwan

Gosa Taatee Ibsa
hojii irra oolchuu.bs.scrollspy Taatee kun yeroo wanti haaraan scrollspy'n socho'u hunda elementii tarree irratti dhukaasa. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})