in English

Agbalẽxatsaxatsa

Trɔ asi le Bootstrap ƒe mɔfiame ŋu le ɖokuiwò si alo ŋlɔ ƒuƒoƒo ƒe akpawo ɖe agbalẽxatsaxatsa ƒe nɔƒe dzi be nàfia kadodo si le dɔ wɔm fifia le nukpɔkpɔƒea.

Ale si wòwɔa dɔe

Nudidi ʋɛ aɖewo le Scrollspy si hafi wòate ŋu awɔ dɔ nyuie:

  • Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js .
  • Ele be woazãe le Bootstrap nav component alo list group dzi .
  • Scrollspy bia position: relative;tso element si dzi nèle ŋku lém ɖo la dzi, zi geɖe la, <body>.
  • Ne èle ŋku lém ɖe nu bubu <body>siwo heightmenye overflow-y: scroll;.
  • Sekewo ( <a>) hiã eye ele be woafia asi element aɖe si me ema le id.

Ne wowɔe dzidzedzetɔe la, wò nav alo list ƒuƒoƒoa awɔ yeye ɖe edzi, atsɔ .activeklass la tso nu ɖeka me ayi bubu dzi le woƒe taɖodzinu siwo do ƒome kplii nu.

Kpɔɖeŋu le navbar me

Ʋu teƒe si le navbar la te eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ. Woaɖe nusiwo le fli dzi la hã afia.

@da ami

Teƒeɖoɖo ƒe nyawo na scrollspy ƒe kpɔɖeŋu. Xɔtuɖaŋu nyuitɔ kekeakee su asiwò. Mɔzɔgbalẽ ƒe stampwo, enye cosmopolitan. Enyo, yeye, sesẽ, míexɔe ɖe gaƒoɖokui dzi. Nyemewɔ ɖoɖo kpɔ be gbeɖeka mabu wò o. Eɖua wò dzi ɖa. Wò nugbugbɔ nye cosmic, ʋuʋu ɖesiaɖe nye akunyawɔwɔ. Mebe woawo, mebe abe eyae nye amea ene. Gbedoname lɔlɔ̃tɔwo mina míazɔ mɔ aɖe. Ðeko zã la tɔ abe July 4 lia ene! Gake anyo na wò wu be nàgblẽ nu.

@mdo dzi

Teƒeɖoɖo ƒe nyawo na scrollspy ƒe kpɔɖeŋu. ‘Elabena eyae nye muse la kple nutala la. (Ale si míewɔnae nye esi) Eyata èdi be yeafe kple akunyawɔwɔ. Eyata kpɔ egbɔ ko hafi nàtsɔ wo katã nam. Mele zɔzɔm, mele zɔzɔm le yame (zã sia me). Dzo le nuƒoa dzi, se wo katã, ɣeyiɣi si nàzɔ azɔlizɔzɔa dzi.

ɖeka

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

Teƒeɖoɖo ƒe nyawo na scrollspy ƒe kpɔɖeŋu. Ne èdi be yeaɖu ɣe, ne èdi wo katã la, ènya be nyee nye nyɔnuvi si wòle be nàyɔ. Zɔ to ahom si me mawɔ la me. Eyata na matsɔ wò dzigbezãwu la ade wò dzigbezãwu me. Ame si si dzo. Le Dzoɖa zã si va yi me, yeah mesusu be míeda se dzi, ɣesiaɣi gblɔna be míadzudzɔ. 'Elabena enye Yoko vi aɖe, Eye wònye 'Oo ao' vi aɖe. Me di be aɖu droppin ', ŋku poppin ', ta turnin ', ŋutilã shockin '. Ẽ, míewɔ míaƒe gaxɔgbalẽviwo max eye wonya mí le ahadzraƒea.

Eye teƒe bubu aɖewo ƒe emenyawo, hena dzidzenu nyui.

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

Kpɔɖeŋu kple nested nav

Scrollspy hã wɔa dɔ kple nested .navs. Ne nested .navnye la .active, edzilawo hã anye .active. Ʋu teƒe si le navbar la xa eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ.

Nyati 1 lia

Teƒeɖoɖo ƒe nyawo na scrollspy ƒe kpɔɖeŋu. Esia ku ɖe nu 1. Ekplɔa wò kilometa geɖe, kɔkɔ ale gbegbe, 'elabena eƒe dukɔwo dome alɔgbɔnukoko ɖeka ma le esi.' Amedzro aɖe le nye aba dzi, ƒoƒo aɖe le nye ta me. Oo, ao. Le agbe bubu me la, mana nànɔ anyi. ‘Elabena nye, ŋutete le ŋunye le nusianu me. Suiting up na nye fiakuku ƒe aʋa la. Wozãnɛ tsɔ fia dziwòlawo ƒe aha helia xɔa tame. Tone, tan fit kple klalo, trɔe ɖe dzi cause eƒe gettin 'kpekpe. Eƒe lɔlɔ̃ le abe atike vɔ̃ɖi ene. Mesusu be meŋlɔ be be tiatia aɖe le asinye.

Nyati 1-1 lia

Teƒeɖoɖo ƒe nyawo na scrollspy ƒe kpɔɖeŋu. Esia ku ɖe nya 1-1 ŋu. Xɔtuɖaŋu nyuitɔ kekeakee su asiwò. Mɔzɔgbalẽ ƒe stampwo, enye cosmopolitan. Enyo, yeye, sesẽ, míexɔe ɖe gaƒoɖokui dzi. Nyemewɔ ɖoɖo kpɔ be gbeɖeka mabu wò o. Eɖua wò dzi ɖa. Wò nugbugbɔ nye cosmic, ʋuʋu ɖesiaɖe nye akunyawɔwɔ. Mebe woawo, mebe abe eyae nye amea ene. Gbedoname lɔlɔ̃tɔwo mina míazɔ mɔ aɖe. Ðeko zã la tɔ abe July 4 lia ene! Gake anyo na wò wu be nàgblẽ nu.

Nyati 1-2 lia

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

Teƒeɖoɖo ƒe nyawo na scrollspy ƒe kpɔɖeŋu. Esia ku ɖe nyati 3-2 ŋu. Wòe nye gbãtɔ, womate ŋu aɖɔlii o. Zã bliboa katã wole ƒoƒom, wò hadzidzi. California nyɔnuviwo míenye amesiwo ŋu womate ŋu ake ɖi le o. Abe xevi si si atɔ mele o ene. Vɔvɔ̃ aɖeke meli fifia o, ɖe asi le eŋu eye nàvo ko, malɔ̃ wò nɔnɔme aɖeke manɔmee. Mete ŋu kpɔa nuŋɔŋlɔ si le gli ŋu. Àte ŋu azɔ mɔ le xexeame gake naneke mete ɖe sikaƒuta ŋu o.

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

Kpɔɖeŋu kple list-group

Scrollspy hã wɔa dɔ kple .list-groups. Ʋu teƒe si le xexlẽdzesiwo ƒe ƒuƒoƒoa xa eye nàkpɔ klass si le dɔ wɔm ƒe tɔtrɔ.

Nyati 1 lia

Teƒeɖoɖo ƒe nyawo na scrollspy list-group ƒe kpɔɖeŋu. Esia ku ɖe nya 1. Mègahiã kukuɖeɖe o. Vɔvɔ̃ aɖeke meli fifia o, ɖe asi le eŋu eye nàvo ko, malɔ̃ wò nɔnɔme aɖeke manɔmee. Dzoɖa si va yi ƒe zã me. Mèganye ŋukpe kinda guy o ma da akɔ be enya kpɔ. Dzomeŋɔli le sekɛndrisuku megbe esime míedo go zi gbãtɔ. ‘Elabena eyae nye muse la kple nutala la. Nu ka? Lala. Esusu be nyee nye amesi to vovo.

Nyati 2 lia

Teƒeɖoɖo ƒe nyawo na scrollspy list-group ƒe kpɔɖeŋu. Esia do ƒome kple nu 2. Ɛ̃, eɖua ɣe ɖe eya ŋutɔ ƒe ƒoƒo nu. Oo, ao. Àte ŋu anye gãtɔ kekeake hafi. ‘Elabena, vinye, dzonue nènye. Ðewohĩ susu aɖe si ta wotu ʋɔtruawo katã ɖo. Ʋu wò dzi eye nàna wòadze egɔme ko. Eyata très chic, ẽ, enye classic.

Nyati 3 lia

Teƒeɖoɖo ƒe nyawo na scrollspy list-group ƒe kpɔɖeŋu. Esia ku ɖe nu 3 lia ŋu. Míeyia dzi yia dzi wu. Míewɔ ɖeka kple evelia manɔmee gbeɖe o, míewɔ nubabla aɖe. Mele zɔzɔm le yame. Ame aɖe gblɔ be èna woɖe wò tattoo la ɖa. Fifia mele tsia dzi abe kpakpaluʋui ene. Tone, tan fit kple klalo, trɔe ɖe dzi cause eƒe gettin 'kpekpe. Cause ne ènye tɔnye ko la, ne ènye tɔnye ko. Ðeko wòle be nàde dzo kekelia me eye nàna wòaklẽ! Eyata míedze mɔdodoa dzi. Ðe nèsena le ɖokuiwò me kpɔ be, se le ɖokuiwò me be pepa le sue alea gbegbea. Mekpɔa wo katã, mekpɔnɛ fifia.

Nyati 4 lia

Teƒeɖoɖo ƒe nyawo na scrollspy list-group ƒe kpɔɖeŋu. Esia ku ɖe nya 4. Dzomeŋɔli le sekɛndrisuku megbe esime míedo go zi gbãtɔ. Vɔvɔ̃ aɖeke meli fifia o, ɖe asi le eŋu eye nàvo ko, malɔ̃ wò nɔnɔme aɖeke manɔmee. Sun-kissed skin si le dzo dam ale gbegbe be míaƒo wò popsicle la. Lɔlɔ̃ sia ana nànɔ ʋuʋum.

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

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Be nàtsɔ scrollspy nuwɔna akpe ɖe wò topbar ƒe mɔfiame ŋu bɔbɔe la, tsɔ kpe data-spy="scroll"ɖe nusi nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>). Emegbe nàtsɔ data-targetnɔnɔme si me Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe ID alo klass le akpe ɖe eŋu .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>

To JavaScript dzi

Ne ètsɔ position: relative;wò CSS kpe ɖe eŋu vɔ la, yɔ agbalẽxatsaxatsa la to JavaScript dzi:

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

ID ƒe taɖodzinu siwo gbɔ woate ŋu akpɔ gbɔ hiã

Ele be id taɖodzinu siwo woate ŋu akpɔ gbɔ nanɔ Navbar kadodowo me. Le kpɔɖeŋu me, ele be a <a href="#home">home</a>nasɔ kple nane si le DOM la me abe <div id="home"></div>.

Woŋe :visibleaɖaba ƒu nusiwo menye taɖodzinu o dzi

Woaŋe aɖaba aƒu taɖodzinu ƒe akpa siwo mele :visiblejQuery ƒe nya nu o dzi eye womaɖe woƒe nav nu siwo sɔ ɖe enu la afia gbeɖe o.

Mɔnuwo

.scrollspy('refresh')

Ne èle scrollspy zãm kpe ɖe nusiwo wotsɔ kpe ɖe DOM ŋu alo wo ɖeɖe ɖa ŋu la, ahiã be nàyɔ gbugbɔgawɔ mɔnu la abe ale:

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

.scrollspy('dispose')

Tsrɔ̃a element aɖe ƒe scrollspy.

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi 10 Pixels siwo woatsɔ atso dzi ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu.
nuwɔmɔnu ka auto Finds which section the sped element is in. autoatia mɔnu nyuitɔ kekeake si dzi woato axɔ agbalẽxatsaxatsa ƒe nɔnɔmetatawo. offsetazã jQuery offset mɔnu atsɔ axɔ agbalẽxatsaxatsa ƒe nɔnɔmetatawo. positionazã jQuery ƒe nɔƒe mɔnu atsɔ axɔ agbalẽxatsaxatsa ƒe nɔnɔmetatawo.
taɖodzinu kaƒoƒo | jQuery ƒe nu | DOM ƒe akpa aɖe Tsɔ element si woatsɔ awɔ Scrollspy ƒe kpeɖeŋutɔ ŋudɔ.

Nudzɔdzɔwo

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
wɔ.bs.agbalẽ xatsaxatsawo Nudzɔdzɔ sia doa dzo ɖe agbalẽxatsaxatsa ƒe akpaa dzi ɣesiaɣi si nu yeye aɖe va le dɔ wɔm to agbalẽxatsaxatsa la dzi. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})