in English

Xiphepherhele xa swiphepherhele

Hi ku tisungulela pfuxeta ku famba-famba ka Bootstrap kumbe ku xaxameta swiphemu swa ntlawa hi ku ya hi xiyimo xa ku rhendzeleka ku kombisa leswaku hi xihi xihlanganisi lexi tirhaka sweswi eka xivono.

Ndlela leyi swi tirhaka ha yona

Scrollspy yi na swilaveko swi nga ri swingani leswaku yi tirha kahle:

  • Loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .
  • Yi fanele ku tirhisiwa eka xiphemu xa nav xa Bootstrap kumbe ntlawa wa nxaxamelo .
  • Scrollspy yi lava position: relative;eka elemente leyi u yi hlotaka, hi ntolovelo <body>.
  • Loko u hlota swiaki swin’wana handle ka <body>, tiyiseka leswaku u ni heightsete ni ku overflow-y: scroll;tirhisiwa.
  • Tianchor ( <a>) ta laveka naswona ti fanele ku kombetela eka elemente leyi nga na sweswo id.

Loko yi tirhisiwile hi ndlela leyi humelelaka, ntlawa wa wena wa nav kumbe wa nxaxamelo wu ta pfuxeta hi ku landza sweswo, wu rhurhela .activetlilasi ku suka eka nchumu wun’wana ku ya eka wun’wana hi ku ya hi swikongomelo swa wona leswi fambisanaka na swona.

Xikombiso eka navbar

Skrolela ndhawu leyi nga ehansi ka navbar ivi u hlalela ku cinca ka tlilasi leyi tirhaka. Swilo leswi nga ehansi swi ta kombisiwa na swona.

@mafurha

Nhundzu ya xikhomela-ndhawu xa xikombiso xa scrollspy. U kume vumaki lebyinene ngopfu. Switempe swa mapasi, u cosmopolitan. Fine, fresh, fierce, hi yi kumile eka xilotlelo. A ndzi si tshama ndzi kunguhata leswaku siku rin’wana ndzi ta va ndzi ku lahlekeriwa. U dya mbilu ya wena yi huma. Kiss ya wena i cosmic, ku famba kun'wana na kun'wana i masalamusi. Ndzi vula lava, ndzi vula onge hi yena loyi. Mi xeweta varhandziwa ahi tekeni riendzo. Ntsena n'wini wa vusiku ku fana na siku ra vumune ra July! Kambe u nga tsakela ku tlanga hi mali.

@mdo

Nhundzu ya xikhomela-ndhawu xa xikombiso xa scrollspy. 'Cause hi yena muse na artist.' (Hi yona ndlela leyi hi endlaka ha yona) So you wanna play with magic. Kutani tiyiseka ntsena u nga si ndzi nyika hinkwaswo. Ndzi famba, ndzi famba emoyeni (vusiku bya namuntlha). Tlula nkulumo, u swi twile hinkwaswo, nkarhi wo famba hi ku famba.

n'we

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

Nhundzu ya xikhomela-ndhawu xa xikombiso xa scrollspy. Loko u lava ku cina, loko u swi lava hinkwaswo, wa swi tiva leswaku hi mina nhwanyana loyi u faneleke ku n'wi fonela. Famba hi xidzedze lexi a ndzi ta xi endla. Kutani ndzi pfumelele ndzi ku nghenisa hi xisuti xa wena xa siku ra ku velekiwa. Loyi a nga baleka. Last Friday night, yeah ndzi ehleketa leswaku hi tlulerile nawu, minkarhi hinkwayo hi ku hi ta yima. 'Cause yena i Yoko nyana, Na yena i 'Oh no' nyana.' Ndzi lava leswaku jaw droppin', eye poppin', nhloko yi hundzuluka, body shockin'. Yeah, hi maxile makhadi ya hina ya xikweleti hi hlongoriwa ebarheni.

Na swin’wana swin’wana swa nhundzu ya xikhomela-ndhawu, ku kuma mpimo lowunene.

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

Xikombiso xa nested nav

Scrollspy yi tlhela yi tirha na nested .navs. Loko nested .navyi ri .active, vatswari va yona na vona va ta va .active. Skrolela ndhawu leyi nga ekusuhi na navbar ivi u hlalela ku cinca ka tlilasi leyi tirhaka.

Nchumu wa 1

Nhundzu ya xikhomela-ndhawu xa xikombiso xa scrollspy. Leyi yi fambelana na nchumu wa 1. Yi ku yisa tikhilomitara ehenhla, ehenhla swinene, 'cause she's got that one international smile. Ku na munhu loyi ndzi nga n'wi tiviki emubedweni wa mina, ku na ku ba ka nhloko ya mina. Oho, e-e. Evuton’wini byin’wana a ndzi ta ku endla u tshama. 'Cause mina, ndzi na vuswikoti bya xin'wana na xin'wana.' Ku faneleka nyimpi ya mina ya ku rhwexa harhi. U tolovele ku yiva byala bya vatswari va wena u khandziya ehenhla ka lwangu. Tone, tan fit and ready, yi hundzuluxela ehenhla cause its gettin' heavy. Rirhandzu ra yena ri fana ni xidzidzirisi. Ndzi ehleketa leswaku ndzi rivele leswaku ndzi ni ku hlawula.

Nchumu wa 1-1

Nhundzu ya xikhomela-ndhawu xa xikombiso xa scrollspy. Leyi yi fambelana na mhaka ya 1-1. U kume vumaki lebyinene ngopfu. Switempe swa mapasi, u cosmopolitan. Fine, fresh, fierce, hi yi kumile eka xilotlelo. A ndzi si tshama ndzi kunguhata leswaku siku rin’wana ndzi ta va ndzi ku lahlekeriwa. U dya mbilu ya wena yi huma. Kiss ya wena i cosmic, ku famba kun'wana na kun'wana i masalamusi. Ndzi vula lava, ndzi vula onge hi yena loyi. Mi xeweta varhandziwa ahi tekeni riendzo. Ntsena n'wini wa vusiku ku fana na siku ra vumune ra July! Kambe u nga tsakela ku tlanga hi mali.

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

Nhundzu ya xikhomela-ndhawu xa xikombiso xa scrollspy. Leyi yi fambelana na nhlokomhaka ya 3-2. U original, a wu nge cinciwi. Vusiku hinkwabyo va ri karhi va tlanga, risimu ra wena. Vanhwanyana va California a hi kanetiwi. Ku fana ni xinyenyana lexi nga riki na xisaka. Akuna ku chava sweswi, tshika u ntshunxeka ntsena, ndzi ta ku rhandza handle ka swipimelo. Ndzi vona leswi tsariweke erirhangwini. U nga famba emisaveni hinkwayo kambe a ku na nchumu lowu tshinelaka ekusuhi ni ribuwa ra nsuku.

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

Xikombiso xa list-group

Scrollspy yi tlhela yi tirha na .list-groups. Skrolela ndhawu leyi nga ekusuhi ni ntlawa wa nxaxamelo ivi u hlalela ku cinca ka tlilasi leyi tirhaka.

Nchumu wa 1

Nhundzu ya xikhomela-ndhawu xa xikombiso xa nxaxamelo-ntlawa wa scrollspy. Leyi yi fambelana na nhlokomhaka 1. U nga lavi ku kombela ku rivaleriwa. Akuna ku chava sweswi, tshika u ntshunxeka ntsena, ndzi ta ku rhandza handle ka swipimelo. Ravuntlhanu lowu hundzeke nivusiku. U nga vi shy kinda guy ndzi ta becha leswaku swi sasekile. Ximumu endzhaku ka xikolo xa le henhla loko hi hlangana ro sungula. 'Cause hi yena muse na artist.' Yini? Yima. A ndzi ehleketa leswaku hi mina ndzi nga riki kona.

Nchumu wa 2

Nhundzu ya xikhomela-ndhawu xa xikombiso xa nxaxamelo-ntlawa wa scrollspy. Leyi yi fambelana na item 2. Yeah, u cina hi beat ya yena. Oho, e-e. A wu ta va u ri lonkulu ku tlula hinkwavo. 'Hikuva n'wananga, u xibalesa xa ndzilo.' Kumbexana xivangelo lexi endlaka leswaku tinyangwa hinkwato ti pfala. Pfula mbilu ya wena ivi u yi tshika yi sungula ntsena. So très chic, yeah, i xikhale xa xikhale.

Nchumu wa 3

Nhundzu ya xikhomela-ndhawu xa xikombiso xa nxaxamelo-ntlawa wa scrollspy. Leyi yi fambelana na mhaka ya 3. Hi ya ehenhla na le henhla. A hi nga si tshama hi endla yin’wana handle ka yin’wana, hi endle ntwanano. Ndzi famba emoyeni. Munhu un’wana u te u susiwile tattoo ya wena. Sweswi ndzi papamala ku fana ni phaphatani. Tone, tan fit and ready, yi hundzuluxela ehenhla cause its gettin' heavy. Cause once u ri wa mina, once u ri wa mina. U fanele u pfurheta ku vonakala ntsena u ku tshika ku voninga! Hiloko hi ba boulevard. Xana u tshama u titwa, u titwa u ri na phepha ro olova swinene. Ndza swi vona hinkwaswo, ndza swi vona sweswi.

Nchumu wa 4

Nhundzu ya xikhomela-ndhawu xa xikombiso xa nxaxamelo-ntlawa wa scrollspy. This one relates to item 4. Ximumu endzhaku ka xikolo xa le henhla loko hi hlangana ro sungula. Akuna ku chava sweswi, tshika u ntshunxeka ntsena, ndzi ta ku rhandza handle ka swipimelo. Sun-kissed skin yi hisa swinene hi ta n'okisela popsicle ya wena. Rirhandzu leri ri ta ku endla u levitate.

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

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Ku engetela hi ku olova mahanyelo ya scrollspy eka ku famba-famba ka wena ka topbar, engetela data-spy="scroll"eka elemente leyi u lavaka ku hlota eka yona (hi ntolovelo leswi swi ta va swi ri <body>). Kutani engetela data-targetxihlawulekisi hi ID kumbe tlilasi ya elemente ya mutswari ya xiphemu xihi na xihi .navxa 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>

Hi ku tirhisa JavaScript

Endzhaku ko engetela position: relative;eka CSS ya wena, vitana scrollspy hi ku tirhisa JavaScript:

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

Swikongomiso swa ID leswi nga lulamisiwaka swa laveka

Swihlanganisi swa Navbar swi fanele ku va na swikongomelo swa id leswi nga lulamisiwaka. Xikombiso, a yi <a href="#home">home</a>fanele ku fambisana na nchumu wo karhi eka DOM ku fana na <div id="home"></div>.

Swiaki leswi nga riki :visibleswa xikongomelo swi honisiwile

Swiaki leswi kongomisiweke leswi nga riki :visiblehi ku ya hi jQuery swi ta honisiwa naswona swilo swa swona swa nav leswi fambelanaka a swi nge pfuki swi kombisiwile.

Maendlelo

.scrollspy('refresh')

Loko u tirhisa scrollspy hi ku fambisana na ku engetela kumbe ku susa swiaki eka DOM, u ta lava ku vitana ndlela yo pfuxeta ku fana na sweswo:

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

.scrollspy('dispose')

Ku herisa scrollspy ya elemente.

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-offset="".

Vito Muxaka Ku tlula Nhlamuselo
offset nomboro 10. Tipikseli to offset kusuka ehenhla loko u hlayela xiyimo xa scroll.
ndlela ntambu auto Finds which section the spied element is in. autoyi ta hlawula ndlela leyinene yo kuma tikhodixini ta ku rhendzeleka. offsetyi ta tirhisa ndlela ya jQuery offset ku kuma tikhodixini ta ku rhendzeleka. positionyi ta tirhisa ndlela ya xiyimo xa jQuery ku kuma tikhodixini ta ku rhendzeleka.
xikongomelo ntambhu ya xirhendzevutani | jNchumu wa xivutiso | Xiphemu xa DOM Ku hlamusela elemente yo tirhisa Scrollspy plugin.

Swiendlakalo

Muxaka wa Xiendlakalo Nhlamuselo
ku tirhisa.bs.scrollspy Xiendlakalo lexi xi pfurha eka elemente ya scroll nkarhi wun’wana na wun’wana loko nchumu lowuntshwa wu sungula ku tirhisiwa hi scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})