Source

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 be wò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

Ad leggings keytar, brunch id nutata kplɔ̃ɖoƒe dolor labore. Pitchfork yr enim lo-fi hafi wodzra qui. Tumblr agble-to-kplɔ̃ kekefɔkpa ƒe gomenɔamesiwo nusianu. Anim keffiyeh carles ƒe lãgbalẽ. Velit seitan mcsweeney ƒe fotoɖeƒe 3 amegãxi ɣleti irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ɖewohĩ mèse wo ŋkɔ kpɔ o et cardigan kakaɖedzi ga culpa biodiesel wes anderson atsyɔ̃ɖoɖo. Nihil tattooed accusamus, cred nukokoedonamela biodiesel keffiyeh aɖaŋudɔwɔla ullamco consequat.

@mdo dzi

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa dɔla kotoku marfa nusianu delectus nuɖuɖu agbatsɔʋu. Sapiente ƒe wɔwɔme id assumenda. Locavore sed helvetica cliche irony, dziɖegbewo ɖewohĩ mèse nu tso wo ŋu o consequat hoodie gluten-maɖemaɖe lo-fi fap aliquip. Labore elit placeat hafi wodzra vɔ, terry richardson proident brunch nesciunt quis cosby awudziwui pariatur keffiyeh ut helvetica aɖaŋudɔwɔla. Cardigan asinudɔwɔwɔ biya seitan dzadzraɖo velit. VHS chambray laboris nye ɣeyiɣi kpui aɖe ƒe veniam. Anim mollit minim commodo ullamco dziɖegbe ƒe avuwo.

<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-haspopup="true" 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

Ex consequat commodo adipisicing kamedede aute negbe occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum ƒe ƒuƒoƒo ƒe ƒuƒoƒo kple dɔwɔwɔ ƒe ƒuƒoƒo. Fugiat laborum incididunt ɣeyiɣi kpui aɖe eu emetsonu enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua kple ame bubuwo ƒe dɔwɔɖui kple nudzɔdzɔwo voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Nyati 1-1 lia

Amet ɣeyiɣi kpui aɖe ƒe mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem kple occaecat elit qui et. Aliquip dɔwɔɖui ex ex esse voluptate occaecat Lorem ullamco dzogbe. Aliqua cillum excepteur irure ƒe emetsonu id quis ea. Nɔ anyi proident ullamco aute magna pariatur nostrud dɔwɔɖui. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur emetsonu eu commodo fugiat non quis. Enim aliquip kamedede ullamco adipisicing voluptate excepteur kamedede suetɔ kekeake kamedede suetɔ kekeake commodo adipisicing kamedede officia nisi adipisicing. Anim id duis qui consequat dɔwɔɖui adipisicing nuvɔ̃ dolor elit cillum anim et fugiat.

Nyati 2-2 lia

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore nɔ anyi culpa commodo elit adipisicing nɔ anyi aliquip elit proident voluptate minim mollit nostrud aute reprehenderit wɔ. Mollit excepteur eu Lorem ipsum anim commodo nuvɔ̃ dɔwɔwɔ Lorem le kamedede velit incididunt. Occaecat consectetur nisi le occaecat proident suetɔ kekeake enim sunt reprehenderit kamedede cupidat et do officia. Aliquip consequat ad dɔwɔɖui dɔ mollit ut amet. Nɔ anyi ɖe pariatur ɣeyiɣi kpui aɖe ƒe proident le veniam culpa aliqua me negbe elit magna fugiat eiusmod amet officia.

<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">Item2</a>
    <a class="nav-link" href="#item-3">Item3</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 2-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

Ex consequat commodo adipisicing kamedede aute negbe occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum ƒe ƒuƒoƒo ƒe ƒuƒoƒo kple dɔwɔwɔ ƒe ƒuƒoƒo. Fugiat laborum incididunt ɣeyiɣi kpui aɖe eu emetsonu enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua kple ame bubuwo ƒe dɔwɔɖui kple nudzɔdzɔwo voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Nyati 2 lia

Quis magna Lorem anim amet ipsum do mollit nɔ anyi cillum voluptate ex nulla ɣeyiɣi kpui aɖe. Laborum consequat non elit enim kamedede cillum aliqua me tsonu id aliqua. Esse ex consectetur mollit voluptate est le duis dɔwɔɖui me kple nɔ anyi ɖe ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem ƒe nɔnɔme si me ame aɖeke mele o la nɔ anyi ɖe edzi. Laborum nisi sit est ɣeyiɣi kpui aɖe ƒe dɔwɔwɔ mollit dɔwɔwɔ officia dɔwɔwɔ excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo ɣeyiɣi kpui aɖe ƒe ɣe le proident me.

Nyati 3 lia

Quis anim nɔ anyi do amet fugiat dolor velit nɔ anyi ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat negbe aliquip culpa aute ɣeyiɣi kpui aɖe ƒe fɔbubu. Deserunt ɣeyiɣi kpui aɖe ƒe mollit elit ex pariatur dolore velit fugiat mollit ƒe culpa irure ullamco est ex ullamco excepteur.

Nyati 4 lia

Quis anim nɔ anyi do amet fugiat dolor velit nɔ anyi ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat negbe aliquip culpa aute ɣeyiɣi kpui aɖe ƒe fɔbubu. Deserunt ɣeyiɣi kpui aɖe ƒe mollit elit ex pariatur dolore velit fugiat mollit ƒe culpa irure ullamco est ex ullamco excepteur.

<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">Item2</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 navigation ŋu bɔbɔe la, tsɔ kpe data-spy="scroll"ɖe element si nèdi be yeatsa ŋku ŋu (zi geɖe la, esia anye <body>). Emegbe nàtsɔ data-targetnɔnɔmea akpe ɖe Bootstrap ƒe akpa ɖesiaɖe ƒe dzila ƒe akpa ƒe ID alo klass ŋ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 etame ne wole akɔnta bum le agbalẽxatsaxatsa ƒe nɔƒe ŋu.

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…
})