in English

Scrollspy

Buyekeza ngokuzenzakalela ukuzulazula kwe-Bootstrap noma uhlu lwezingxenye zeqembu ngokusekelwe endaweni yokuskrola ukuze ubonise ukuthi yisiphi isixhumanisi esisebenzayo okwamanje endaweni yokubuka.

Isebenza kanjani

I-Scrollspy inezidingo ezimbalwa ukuze isebenze kahle:

Uma wakha i-JavaScript yethu ngomthombo, idingautil.js .
Kufanele isetshenziswe engxenyeni ye-Bootstrap nav noma iqembu lohlu .
I-Scrollspy idinga position: relative;ku-elementi oyihlolayo, ngokuvamile i- <body>.
Uma uhlola izakhi ngaphandle kwe- <body>, qiniseka ukuthi heightunesethi futhi overflow-y: scroll;uyasetshenziswa.
Amahange ( <a>) ayadingeka futhi kufanele akhombe into enaleyo id.

Lapho isetshenziswe ngempumelelo, i-nav yakho noma iqembu lohlu lizobuyekezwa ngokufanele, lisuse .activeikilasi lisuke entweni eyodwa liye kwelandelayo ngokusekelwe kulokho elikuhlosile okuhlobene.

Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto zokwehla zizogqanyiswa futhi.

@amafutha

Okuqukethwe kwesimeli kwesibonelo sokuskrola. Unezakhiwo ezinhle kakhulu. Izitembu zamaphasiphothi, ungumuntu wezizwe zonke. Kuhle, kusha, kunolaka, sikufake kukhiye. Angikaze ngihlele ukuthi ngelinye ilanga ngiyolahlekelwa nguwe. Udla inhliziyo yakho. Ukuqabula kwakho ku-cosmic, konke ukunyakaza kuwumlingo. Ngisho laba, ngiqonde ukuthi uyena. Sanibonani zithandwa asithathe uhambo. Vele uphathe ubusuku obunjengomhla zizi-4 kuJulayi! Kodwa uncamela ukumoshakala.

@mdo

Okuqukethwe kwesimeli kwesibonelo sokuskrola. Ngoba uyimyuziyamu kanye nomculi. (Yile ndlela esenza ngayo) Ngakho-ke ufuna ukudlala ngomlingo. Ngakho qiniseka nje ngaphambi kokuthi unginike konke. Ngiyahamba, ngihamba emoyeni (namuhla ebusuku). Yeqa inkulumo, yezwa konke, isikhathi sokuhamba ngezinyawo.

eyodwa

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

Okuqukethwe kwesimeli kwesibonelo sokuskrola. Uma ufuna ukudansa, uma ufuna konke, uyazi ukuthi ngiyintombazane okufanele uyibize. Ngihambe phakathi kwesivunguvungu. Ngakho-ke ake ngikufake isudi yakho yokuzalwa. Lowo obalekile. NgoLwesihlanu olwedlule ebusuku, yebo ngicabanga ukuthi sephule umthetho, sihlale sithi sizoyeka. Ngoba uyingcosana ka-Yoko, Futhi unengcosana ethi 'Hhayi cha'. Ngifuna i-dropin yomhlathi', i-eye poppin', i-head turnin', i-body shockin'. Yebo, siwengeze amakhadi ethu esikweletu futhi saxoshwa ebha.

Nokunye okuqukethwe kwesimeli, ngesilinganiso esihle.

<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>

Isibonelo esine-nested nav

I-Scrollspy iphinde isebenze ne-nested .navs. Uma kunesidleke .nav, .activeabazali bayo nabo bazoba .active. Skrola indawo eduze kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo.

Into 1

Okuqukethwe kwesimeli kwesibonelo sokuskrola. Lena ihlobene nento 1. Ikuyisa amamayela phezulu, phezulu kakhulu, ngoba unokumamatheka okukodwa kwamazwe ngamazwe. Kunomuntu engingamazi embhedeni wami, kuduma ikhanda lami. O, cha. Kwenye impilo ngizokwenza uhlale. Ngoba mina, ngingenza noma yini. Ukulungela impi yami yomqhele. Ujwayele ukweba utshwala babazali bakho ugibele ophahleni. Ithoni, i-tan ilingana futhi ilungile, yiphakamise bangela ukuba kube nzima kakhulu. Uthando lwakhe lufana nesidakamizwa. Ngicabanga ukuthi ngikhohliwe ukuthi nganginokukhetha.

Into 1-1

Okuqukethwe kwesimeli kwesibonelo sokuskrola. Lokhu kuhlobene nento 1-1. Unezakhiwo ezinhle kakhulu. Izitembu zamaphasiphothi, ungumuntu wezizwe zonke. Kuhle, kusha, kunolaka, sikufake kukhiye. Angikaze ngihlele ukuthi ngelinye ilanga ngiyolahlekelwa nguwe. Udla inhliziyo yakho. Ukuqabula kwakho ku-cosmic, konke ukunyakaza kuwumlingo. Ngisho laba, ngiqonde ukuthi uyena. Sanibonani zithandwa asithathe uhambo. Vele uphathe ubusuku obunjengomhla zizi-4 kuJulayi! Kodwa uncamela ukumoshakala.

Iphuzu 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

Okuqukethwe kwesimeli kwesibonelo sokuskrola. Lokhu kuhlobene nento 3-2. Ungowangempela, awukwazi ukushintshwa. Ubusuku bonke bayadlala, ingoma yakho. Amantombazane aseCalifornia asinakuphikwa. Njengenyoni engenasibaya. Akukho ukwesaba manje, dedela futhi ukhululeke, ngizokuthanda ngaphandle kwemibandela. Ngiyawubona umbhalo odongeni. Ungahamba umhlaba kodwa akukho lutho olusondela ogwini lwegolide.

<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>

Isibonelo nge-list-group

I-Scrollspy iphinde isebenze no- .list-groups. Skrola indawo eseduze neqembu lohlu bese ubuka ukuguquka kwekilasi elisebenzayo.

Into 1 Into 2 Into yesi-3 Iphuzu 4

Into 1

Okuqukethwe kwesimeli kwesibonelo seqembu le-scrollspy. Lokhu kuhlobene nento 1. Akudingi ukuxolisa. Akukho ukwesaba manje, dedela futhi ukhululeke, ngizokuthanda ngaphandle kwemibandela. Ebusuku ngolwesihlanu odlule. Ungabi umfana onamahloni ngizobhejwa yinhle. Ihlobo ngemva kwesikole samabanga aphezulu lapho siqala ukuhlangana. Ngoba uyimyuziyamu kanye nomculi. Ini? Linda. Ngangicabanga ukuthi ngangihlukile.

Into 2

Okuqukethwe kwesimeli kwesibonelo seqembu le-scrollspy. Lona uhlobene nento 2. Yebo, udansela isigqi sakhe. O, cha. Ubungaba mkhulu kunabo bonke. Ngoba, mntanami, uyisiqhumane. Mhlawumbe isizathu sokuthi kungani yonke iminyango ivaliwe. Vula inhliziyo yakho futhi uyivumele iqale. Ngakho-ke u-très chic, yebo, ungumfundi wakudala.

Into yesi-3

Okuqukethwe kwesimeli kwesibonelo seqembu le-scrollspy. Lena ihlobene nento 3. Siya phezulu naphezulu. Ungalokothi omunye ngaphandle komunye, senza isivumelwano. Ngihamba emoyeni. Othile uthe ukhiphe i-tattoo yakho. Manje sengintanta njengovemvane. Ithoni, i-tan ilingana futhi ilungile, yiphakamise bangela ukuba kube nzima kakhulu. Ngoba uma usungowami, uma usungowami. Kufanele nje uthungele isibani futhi usivumele sikhanye! Ngakho sishaya i-boulevard. Uyake uzwe, uzwe iphepha lincane kangaka. Ngiyakubona konke, ngiyakubona manje.

Iphuzu 4

Okuqukethwe kwesimeli kwesibonelo seqembu le-scrollspy. Lokhu kuhlobene nento 4. Ihlobo ngemva kokuphuma kwesikole samabanga aphezulu lapho siqala ukuhlangana. Akukho ukwesaba manje, dedela futhi ukhululeke, ngizokuthanda ngaphandle kwemibandela. Isikhumba esiqatshulwe ilanga sishisa kakhulu sizoncibilikisa i-popsicle yakho. Lolu thando luzokwenza ubukeke.

<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>

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>). Bese wengeza data-targetisibaluli nge-ID noma isigaba sesici esingumzali sanoma iyiphi .navingxenye ye-Bootstrap.

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>

Nge-JavaScript

Ngemva kokungeza position: relative;ku-CSS yakho, shayela i-scrollspy nge-JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Kudingeka okuqondiwe kwe-ID okungaxazululeka

Izixhumanisi ze-Navbar kufanele zibe neziqondiso ze-id ezingaxazululeka. Isibonelo, <a href="#home">home</a>okumele kuhambisane nento ethize ku-DOM efana ne- <div id="home"></div>.

`:visible`Izinto ezingaqondisiwe azinakiwe

Izinto eziqondiwe ezingahambisani :visiblene-jQuery zizozitshwa futhi izinto zazo ze-nav ezihambisanayo azisoze zagqanyiswa.

Izindlela

`.scrollspy('refresh')`

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

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

`.scrollspy('dispose')`

Icekela phansi i-scrollspy yento.

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Igama	Uhlobo	Okuzenzakalelayo	Incazelo
offset	inombolo	10	Amaphikseli okufanele uwasuse ukusuka phezulu uma ubala indawo yokuskrola.
indlela	umucu	okuzenzakalelayo	Ithola ukuthi yisiphi isigaba into eyisihloli esikuso. `auto`izokhetha indlela engcono kakhulu yokuthola izixhumanisi zokuskrola. `offset`izosebenzisa indlela ye-jQuery offset ukuze ithole izixhumanisi zokuskrola. `position`izosebenzisa indlela ye-jQuery ukuze ithole izixhumanisi zokuskrola.
okuhlosiwe	umucu \| into ye-jQuery \| Isici se-DOM		Icacisa into ezosetshenziswa i-plugin ye-Scrollspy.

Imicimbi

Uhlobo Lomcimbi	Incazelo
activate.bs.scrollspy	Lo mcimbi uvutha kusici sokuskrola noma nini lapho into entsha yenziwa isebenze i-scrollspy.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Isebenza kanjani

Isibonelo ku-navbar

@amafutha

@mdo

eyodwa

two

three

Isibonelo esine-nested nav

Into 1

Into 1-1

Iphuzu 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Isibonelo nge-list-group

Into 1

Into 2

Into yesi-3

Iphuzu 4

Ukusetshenziswa

Ngezibaluli zedatha

Nge-JavaScript

Kudingeka okuqondiwe kwe-ID okungaxazululeka

:visibleIzinto ezingaqondisiwe azinakiwe

Izindlela

.scrollspy('refresh')

.scrollspy('dispose')

Izinketho

Imicimbi

`:visible`Izinto ezingaqondisiwe azinakiwe

`.scrollspy('refresh')`

`.scrollspy('dispose')`