in English

Scrollspy

Hlaziya ngokuzenzekelayo ukukhangela kweBootstrap okanye uluhlu lwamalungu eqela ngokusekelwe kwindawo yokuskrola ukubonisa ukuba leliphi ikhonkco elisebenzayo ngoku kwindawo yokujonga.

Ingaba isebenza kanjani

IScrollspy ineemfuno ezimbalwa zokusebenza ngokufanelekileyo:

  • Ukuba wakha iJavaScript yethu kwimvelaphi, kufunautil.js .
  • Kufuneka isetyenziswe kwi Bootstrap nav inxalenye okanye uluhlu lweqela .
  • I-Scrollspy ifuna position: relative;into oyihlolayo, ngokwesiqhelo i <body>.
  • Xa uhlola izinto ngaphandle kwe <body>, qiniseka ukuba heightuneseti kwaye overflow-y: scroll;usebenzise.
  • Iiankile ( <a>) ziyafuneka kwaye kufuneka zalathe kwinto enaloo nto id.

Xa iphunyezwe ngempumelelo, i-nav yakho okanye iqela loluhlu liya kuhlaziya ngokufanelekileyo, lihambisa .activeiklasi ukusuka kwinto enye ukuya kwelandelayo ngokusekelwe kwiithagethi zabo ezinxulumene nazo.

Umzekelo kwi-navbar

Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Izinto eziya kuhla nazo ziya kuphawulwa.

@fat

Umxholo wesibambi somzekelo wokuskrola. Unezona zakhiwo zintle. Izitampu zepasile, ungumntu wonke. Ilungile, intsha, yoyikeka, siyifumene itshixiwe. Andizange ndicebe ukuba ngenye imini ndizakube ndilahlekelwe nguwe. Utya intliziyo yakho. Ukuncamisa kwakho ku-cosmic, yonke intshukumo ingumlingo. Ndithetha aba, ndithetha ngathi nguye. Molweni zithandwa masithathe uhambo. Bunini nje ubusuku obunje nge-4 kaJulayi! Kodwa ukhetha ukuchitha.

@mdo

Umxholo wesibambi somzekelo wokuskrola. Kuba nguye umziyam kunye negcisa. (Le yindlela esenza ngayo) Ke ufuna ukudlala ngomlingo. Ngoko qiniseka nje ngaphambi kokuba unike yonke into kum. Ndiyahamba, ndihamba emoyeni (namhlanje ebusuku). Tsiba intetho, wayiva yonke, ixesha lokuhamba uhambo.

Nye

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

Umxholo wesibambi somzekelo wokuskrola. Ukuba ufuna ukudanisa, ukuba uyayifuna yonke, uyazi ukuba ndiyintombazana onokuthi uyibize. Ndihambe phakathi kwesaqhwithi. Ke mandikufake kwisuti yakho yokuzalwa. Lo wabaleka. Kubusuku bangoLwesihlanu ophelileyo, ewe ndicinga ukuba sophule umthetho, sihlala sisithi siyakuyeka. Kuba umncinci kaYoko, kwaye unentwana ka 'Owu hayi'. Ndifuna i-dropin yomhlathi, i-eye poppin ', intloko ijika', i-body shockin'. Ewe, siwanyuse amakhadi ethu etyala kwaye sakhutshelwa ngaphandle kwebar.

Kwaye omnye umxholo wesibambi-ndawo, ngomlinganiselo olungileyo.

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

Umzekelo ngendlwane nav

I-Scrollspy iphinda isebenze kunye ne-nested .navs. Ukuba indlwane .navikhona .active, abazali bayo nabo baya kuba .active. Skrolela indawo ecaleni kwebar ye-nav kwaye ubukele utshintsho lweklasi esebenzayo.

Umba woku-1

Umxholo wesibambi somzekelo wokuskrola. Le inxulumene nomba woku-1. Ukuthabatha imayile phezulu, phezulu kakhulu, kuba unoncumo olunye lwamazwe ngamazwe. Kukho umntu endingamaziyo ebhedini yam, kukho ukubetha kwentloko yam. Oh hayi. Kobunye ubomi bendizakwenza uhlale. Kuba mna, ndiyakwazi nantoni na. Ukulungela idabi lam lesithsaba. Uqhele ukuba utywala babazali bakho kwaye ukhwele eluphahleni. Ithoni, i-tan ifanelekile kwaye ilungile, yinyuse ibangele ukuba ibenzima. Uthando lwakhe lufana neziyobisi. Ndicinga ukuba bendilibele ukuba bendine choice.

Umba 1-1

Umxholo wesibambi somzekelo wokuskrola. Le ihambelana nento 1-1. Unezona zakhiwo zintle. Izitampu zepasile, ungumntu wonke. Ilungile, intsha, yoyikeka, siyifumene itshixiwe. Andizange ndicebe ukuba ngenye imini ndizakube ndilahlekelwe nguwe. Utya intliziyo yakho. Ukuncamisa kwakho ku-cosmic, yonke intshukumo ingumlingo. Ndithetha aba, ndithetha ngathi nguye. Molweni zithandwa masithathe uhambo. Bunini nje ubusuku obunje nge-4 kaJulayi! Kodwa ukhetha ukuchitha.

Into 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

Umxholo wesibambi somzekelo wokuskrola. Le ihambelana nento 3-2. Ungowoqobo, awunakutshintshwa. Ubusuku bonke bayadlala, ingoma yakho. Amantombazana aseCalifornia asinakuphikiswa. Njengentaka engenandlwane. Akukho loyiko ngoku, khulula uhambe kwaye ukhululeke, ndiyakuthanda ngokungaguqukiyo. Ndiyawubona umbhalo osedongeni. Ungalihamba ilizwe kodwa akukho nto isondela kunxweme 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>

Umzekelo kunye noluhlu-iqela

I-Scrollspy isebenza kunye no- .list-groups. Skrolela indawo ecaleni kweqela loluhlu kwaye ubukele utshintsho lweklasi esebenzayo.

Umba woku-1

Isibambi-ndawo somzekelo woluhlu lwe-scrollspy. Le inxulumene nento 1. Sukufuna uxolo. Akukho loyiko ngoku, khulula uhambe kwaye ukhululeke, ndiyakuthanda ngokungaguqukiyo. Kubusuku obudlule bangolwsihlanu. Musa ukuba neentloni kinda guy ndiya kubheja intle. Ehlotyeni emva kwesikolo samabanga aphakamileyo xa sasiqala ukudibana. Kuba nguye umziyam kunye negcisa. Intoni? Yima. Ndandicinga ukuba ndim owahlukileyo.

Into yesi-2

Isibambi-ndawo somzekelo woluhlu lwe-scrollspy. Lo uhambelana nomba wesi-2. Ewe, udanisa ngesingqi sakhe. Oh hayi. Unokuba ngoyena mkhulu. Kuba, mntwana, ungumlilo. Mhlawumbi isizathu sokuba zonke iingcango zivaliwe. Vula intliziyo yakho kwaye uyivumele iqale. Ke u-très chic, ewe, ungumfundi wakudala.

Into yesi-3

Isibambi-ndawo somzekelo woluhlu lwe-scrollspy. Le inxulumene nomba wesi-3. Siya phezulu nangaphezulu. Asoze omnye ngaphandle komnye, senze isivumelwano. Ndihamba emoyeni. Umntu uthe uwususile umvambo wakho. Ngoku ndidada njengebhabhathane. Ithoni, i-tan ifanelekile kwaye ilungile, yinyuse ibangele ukuba ibenzima. Kuba xa ungowam, xa ungowam. Kufuneka ulayite isibane kwaye usivumele sikhanye! Ngoko sibetha i-boulevard. Ngaba ukhe uzive, uzive ubhityile iphepha. Ndiyayibona yonke into, ndiyayibona ngoku.

Into yesi-4

Isibambi-ndawo somzekelo woluhlu lwe-scrollspy. Le inxulumene nenqaku 4. Ihlobo emva kwesikolo samabanga aphakamileyo xa sasiqala ukudibana. Akukho loyiko ngoku, khulula uhambe kwaye ukhululeke, ndiyakuthanda ngokungaguqukiyo. Ulusu oluncanyiswa lilanga lushushu kakhulu siya kunyibilikisa ipopsicle yakho. Olu thando luya kukwenza ube nelevite.

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

Ukusetyenziswa

Ngeempawu zedatha

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-spy="scroll"kwinto ofuna ukuyihlola (ubukhulu becala le iya kuba yi <body>). Emva koko yongeza data-targetuphawu kunye ne-ID okanye udidi lwelungu lomzali walo naliphi na ilungu le-Bootstrap .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>

NgeJavaScript

Emva kokongeza position: relative;kwiCSS yakho, fowunela iscrollspy ngeJavaScript:

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

Kufuneka iithagethi ze-ID ezinokusonjululwa

Unxulumano lwebar yeNavbar kufuneka lube nethagethi ye-id enokusombululeka. Umzekelo, <a href="#home">home</a>kufuneka ihambelane nento ekwiDOM efana <div id="home"></div>.

Izinto ezingajoliswanga :visiblezingahoywa

Izinto ekujoliswe kuzo ezingahambelaniyo :visiblene-jQuery aziyi kuhoywa kwaye izinto zazo ze-nav ezihambelanayo azisayi kuphawulwa.

Iindlela

.scrollspy('refresh')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

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

.scrollspy('dispose')

Itshabalalisa iscrollspy ye element.

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-, njengakwi data-offset="".

Igama Uhlobo Ukuhlala kukho Inkcazo
i-offset inani 10 Iipikseli zokulinganisa ukusuka phezulu xa ubala indawo yokuskrola.
indlela umtya ezizenzekelayo Ifumana ukuba leliphi icandelo elikuyo into yokujonga. autoiya kukhetha eyona ndlela ilungileyo yokufumana ulungelelwaniso lokuskrola. offsetizakusebenzisa indlela yokucima i-jQuery ukufumana ulungelelwaniso lokuskrola. positionizakusebenzisa indlela ye-jQuery yesikhundla ukufumana izilungelelanisi zokuskrola.
ekujoliswe kuko umtya | jQuery into | Into ye-DOM Ikhankanya into yokufaka iplagi yeScrollspy.

Iziganeko

Uhlobo loMnyhadala Inkcazo
vula.bs.scrollspy Esi siganeko sivutha kwinto yokuskrola nanini na xa into entsha ivulwa yi-scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})