in English

Ebiwandiiko ebiyitibwa Scrollspy

Okulongoosa mu ngeri ey’otoma ebitundu by’okutambuliramu kwa Bootstrap oba olukalala lw’ekibinja okusinziira ku kifo ky’okutambula okulaga enkolagana ki ekola mu kiseera kino mu kifo eky’okulaba.

Engeri gye kikola

Scrollspy erina ebitonotono bye yeetaaga okukola obulungi:

  • Bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .
  • Kiteekwa okukozesebwa ku kitundu kya Bootstrap nav oba ekibiina ky'olukalala .
  • Scrollspy yeetaaga position: relative;ku elementi gy'oketta, ebiseera ebisinga <body>.
  • Bw’oba ​​oketta elementi endala ezitali za <body>, kakasa nti olina heightset era overflow-y: scroll;n’osiiga.
  • Ennanga ( <a>) zeetaagibwa era zirina okusonga ku elementi eriko ekyo id.

Bwe kiteekebwa mu nkola obulungi, nav yo oba ekibiina kyo eky’olukalala kijja kulongoosa okusinziira ku ekyo, okutambuza .activeekibiina okuva ku kintu ekimu okudda ku kirala okusinziira ku bigendererwa byabwe ebikwatagana.

Okugeza mu navbar

Ssenda ekitundu wansi wa navbar era olabe enkyukakyuka ya kiraasi ekola. Ebintu ebigenda okukka wansi nabyo bijja kulagibwa.

@obunene

Ebirimu mu kifo eky'ekyokulabirako kya scrollspy. Ofunye ebizimbe ebisinga obulungi. Sitampu za paasipooti, ​​ye cosmopolitan. Fine, fresh, fierce, twagifuna ku kkufulu. Never planned nti olunaku lumu nja kuba nkufiirwa. Akulya omutima gwo nga gufulumye. Kiss yo ya cosmic, buli move eba ya magic. Ntegeeza ezo, ntegeeza nga ye y'oyo. Mbalamusize abaagalwa tukole olugendo. Just own the night nga nga 4th July! Naye wandibadde ogenda kwonooneka.

@mdo

Ebirimu mu kifo eky'ekyokulabirako kya scrollspy. 'Kubanga ye muse era ye muyimbi. (This is how we do) Kale oyagala kuzannya n'obulogo. Kale just be sure nga tonnaba kumpa byonna. Ntambula, ntambula ku mpewo (ekiro kino). Skip the talk, owulidde byonna, ekiseera okutambula okutambula.

emu

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

Ebirimu mu kifo eky'ekyokulabirako kya scrollspy. Bwoba oyagala okuzina, bwoba oyagala byonna, okimanyi nti nze omuwala gwe wandibadde oyita. Tambula mu kibuyaga kye nnandikoze. Kale ka nkufunire mu ssuuti yo ey’amazaalibwa. Eyo eyawona. Last Friday night, yeah ndowooza twamenya amateeka, bulijjo tugamba nti tugenda kukoma. 'Kubanga ye Yoko katono, Ate ye 'Oh nedda' katono. Njagala akawanga ka droppin', eye poppin', omutwe turnin', omubiri shockin'. Yeah, twa maxed credit cards zaffe netugobwa mu bbaala.

Era ebimu ebirala ebirimu ekifo, olw'ekipimo ekirungi.

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

Okugeza ne nested nav

Scrollspy era ekola ne nested .navs. Singa nested .naveba .active, bazadde baayo nabo bajja kuba .active. Ssenda ekitundu ekiriraanye navbar era olabe enkyukakyuka ya kiraasi ekola.

Ekintu 1

Ebirimu mu kifo eky'ekyokulabirako kya scrollspy. Ono akwatagana n'ekintu 1. Akutwala mayiro waggulu, waggulu nnyo, 'kubanga alina akamwenyumwenyu ako akamu ak'ensi yonna. Mu kitanda kyange mulimu omuntu gwe simanyi, waliwo okukuba mu mutwe. Oh, nedda. Mu bulamu obulala nandikufudde okusigala. ‘Kubanga nze, nnina obusobozi mu kintu kyonna. Okusaanira olutalo lwange olw’okutikkira engule. Ekozesebwa okubba omwenge gwa bazadde bo n'olinnya ku kasolya. Tone, tan fit ate nga ready, gikyuse waggulu cause its gettin' heavy. Omukwano gwe gulinga eddagala. Ntebereza nti nneerabira nti nnina eky’okulondako.

Ekintu 1-1

Ebirimu mu kifo eky'ekyokulabirako kya scrollspy. Kino kikwata ku kintu 1-1. Ofunye ebizimbe ebisinga obulungi. Sitampu za paasipooti, ​​ye cosmopolitan. Fine, fresh, fierce, twagifuna ku kkufulu. Never planned nti olunaku lumu nja kuba nkufiirwa. Akulya omutima gwo nga gufulumye. Kiss yo ya cosmic, buli move eba ya magic. Ntegeeza ezo, ntegeeza nga ye y'oyo. Mbalamusize abaagalwa tukole olugendo. Just own the night nga nga 4th July! Naye wandibadde ogenda kwonooneka.

Ekintu 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

Ebirimu mu kifo eky'ekyokulabirako kya scrollspy. Kino kikwata ku kintu 3-2. Oli original, tosobola kukyusibwa. Ekiro kyonna bakuba, oluyimba lwo. Abawala ba California ffe tetugaanirwa. Nga ekinyonyi ekitaliiko kiyumba. Tewali kutya kati, leka obeere wa ddembe, njakwagala awatali bukwakkulizo. Nze ndaba ekiwandiiko ku bbugwe. Oyinza okutambula ensi yonna naye tewali kisemberera lubalama lwa zaabu.

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

Ekyokulabirako ne list-group

Scrollspy nayo ekola ne .list-groups. Ssenda ekitundu ekiriraanye ekibinja ky’olukalala era olabe enkyukakyuka ya kiraasi ekola.

Ekintu 1

Ebirimu eby'ekifo eky'ekyokulabirako ky'olukalala-ekibinja kya scrollspy. Kino kikwatagana n’ekintu 1. Teweetaaga kwetonda. Tewali kutya kati, leka obeere wa ddembe, njakwagala awatali bukwakkulizo. Lwakutaano oluwedde ekiro. Tobeera shy kinda guy nja bet nti kinyuma. Summer nga tuvudde mu siniya nga twasooka okusisinkana. 'Kubanga ye muse era ye muyimbi. Kiki? Linda. Yalowooza nti nze nali okujjako.

Ekintu 2

Ebirimu eby'ekifo eky'ekyokulabirako ky'olukalala-ekibinja kya scrollspy. Ono akwatagana n’ekintu 2. Yee, azina ku beat ye. Oh, nedda. Ggwe wandibadde asinga obukulu. ‘Kubanga mwana wange oli muliroliro. Mpozzi ensonga lwaki enzigi zonna ziggaddwa. Ggulawo omutima gwo oleke gutandike. So très chic, yeah, ye muyimbi wa classic.

Ekintu 3

Ebirimu eby'ekifo eky'ekyokulabirako ky'olukalala-ekibinja kya scrollspy. Kino kikwatagana n’ekintu 3. Tugenda waggulu nnyo. Never emu nga tewali munne, twakola endagaano. Nze ntambula ku mpewo. Waliwo eyagamba nti waggyiddwaako ttatu. Kati ntengejja ng’ekiwujjo. Tone, tan fit ate nga ready, gikyuse waggulu cause its gettin' heavy. Kubanga olumala okuba wange, omulundi gumu oba wange. You just gotta ignite ekitangaala n'okireka ne kitangaala! Bwetutyo twakuba oluguudo lwa Boulevard. Owulirako, owulira nga empapula zigonvu nnyo. Byonna mbilaba, mbilaba kati.

Ekintu 4

Ebirimu eby'ekifo eky'ekyokulabirako ky'olukalala-ekibinja kya scrollspy. Kino kikwatagana n’ekintu 4. Ekyeya nga tuvudde mu siniya nga twasooka okusisinkana. Tewali kutya kati, leka obeere wa ddembe, njakwagala awatali bukwakkulizo. Olususu olunywegera omusana nga lwokya nnyo tujja kusaanuusa popsicle yo. Okwagala kuno kujja kukuleetera okuwuubaala.

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

Enkozesa

Okuyita mu bikwata ku data

Okusobola okwanguyirwa okwongerako enneeyisa ya scrollspy ku topbar navigation yo, yongera data-spy="scroll"ku elementi gy’oyagala okuketta (okusinga kino kyandibadde <body>). Oluvannyuma yongera ku data-targetattribute ne ID oba class ya parent element ya Bootstrap .navcomponent yonna.

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>

Okuyita mu JavaScript

Oluvannyuma lw’okugattako position: relative;mu CSS yo, yita scrollspy ng’oyita mu JavaScript:

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

Ebiruubirirwa bya ID ebigonjoolwa byetaagisa

Enkolagana za Navbar zirina okuba n'ebigendererwa bya id ebisobola okugonjoolwa. Okugeza, a <a href="#home">home</a>erina okukwatagana n’ekintu mu DOM nga <div id="home"></div>.

:visibleEbintu ebitali bigendererwa bibuusibwa amaaso

Ebintu ebigendererwa ebitali :visibleokusinziira ku jQuery bijja kubuusibwa amaaso era ebintu byabwe ebya nav ebikwatagana tebijja kulagibwa.

Enkola

.scrollspy('refresh')

Bw'oba okozesa scrollspy wamu n'okugattako oba okuggyawo ebintu okuva mu DOM, ojja kwetaaga okuyita enkola y'okuzza obuggya nga bwe kityo:

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

.scrollspy('dispose')

Esaanyaawo scrollspy ya elementi.

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-offset="".

Erinnya Okuwandiika Okukosamu Okunnyonnyola
offset omuwendo 10. 10 Pixels oku offset okuva waggulu nga obala ekifo ky'omuzingo.
engeri akaguwa auto Finds the section the sped element is in. autoajja kulonda enkola esinga obulungi okufuna scroll coordinates. offsetejja kukozesa enkola ya jQuery offset okufuna scroll coordinates. positionejja kukozesa enkola ya jQuery position okufuna scroll coordinates.
ssabaawa olunyiriri | jEkintu ky'okubuuza | Ekintu kya DOM Laga elementi okukozesa Scrollspy plugin.

Ebibaddewo

Ekika ky’Ekibaddewo Okunnyonnyola
okukola.bs.srollspy Ekintu kino kikuba amasasi ku elementi y'omuzingo buli kintu ekipya lwe kifuuka ekikozesebwa scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})