Source

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

Ad leggings keytar, brunch id art akabaga ka dolor labore. Pitchfork yr enim lo-fi nga tebannaba kutunda qui. Tumblr eddembe ly'obugaali okuva ku faamu okutuuka ku mmeeza kyonna. Anim keffiyeh kaadi ya carles. Velit seitan mcsweeney's ekifaananyi ekifo 3 omusege omwezi irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui osanga toziwuliddeko et cardigan ssente z'obwesige culpa biodiesel wes anderson aesthetic. Nihil alina ttatu accusamus, cred irony biodiesel keffiyeh omukozi w'emikono ullamco ekivaamu.

@mdo

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 ensawo y'omubaka marfa kyonna delectus loole y'emmere. Sapiente synth id okulowooza nti. Locavore sed helvetica cliche irony, okubwatuka osanga towuliddeko consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat nga tebannaba kutunda, terry richardson proident brunch nesciunt quis cosby ssweeta pariatur keffiyeh ut helvetica omukubi w'emikono. Cardigan craft bbiya seitan nga yeetegefu velit. VHS chambray laboris ekika kya veniam eky’ekiseera. Anim mollit minim commodo ullamco okubwatuka kw'okubwatuka.

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

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

Ex consequat commodo adipisicing okukola dduyiro aute okuggyako occaecat ullamco duis aliqua id magna ullamco eu. Kola aute ipsum ipsum ullamco cillum okutonnya ut n’okukola emirimu egy’enjawulo. Fugiat okuzaala incididunt ekiseera eu ekivaamu enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate etali ya bulamu okuvumirira adipisicing dolore ut ekivaamu deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id ekikwekweto ekitali kya mugaso ekitali kya mugaso ekitali kya mugaso commodo velit ut eiusmod ekifuba eky'abakulu elit dolore.

Ekintu 1-1

Amet tempor mollit aliquip pariatur okujjako commodo okukola ea cillum commodo Lorem ne occaecat elit qui et. Aliquip okukola ex ex esse okwegomba occaecat Lorem ullamco okudduka. Aliqua cillum okujjako irure ekivaamu id quis ea. Tuula proident ullamco aute magna pariatur okukola ennyindo. Okuvumirira aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur ekivaamu eu commodo fugiat ekitali kituufu. Enim aliquip okukola dduyiro ullamco adipisicing voluptate excepteur dduyiro omutono minim minim commodo adipisicing dduyiro officia nisi adipisicing. Anim id duis qui consequat okukola adipisicing sint dolor elit cillum anim n'okudduka.

Ekintu 2-2

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 okutuula culpa commodo elit adipisicing tuula aliquip elit proident voluptate ekitono ekiwujjo nostrud aute okunenya okukola. Mollit excepteur eu Lorem ipsum anim commodo sint omulimu Lorem mu kukola dduyiro velit incididunt. Occaecat consectetur nisi mu occaecat proident minim enim sunt okunenya okukola dduyiro cupidatat et do officia. Aliquip consequat ad okukola omulimu mollit ut amet. Tuula pariatur tempor proident mu veniam culpa aliqua okujjako elit magna okudduka 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>

Ekyokulabirako ne list-group

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

Ekintu 1

Ex consequat commodo adipisicing okukola dduyiro aute okuggyako occaecat ullamco duis aliqua id magna ullamco eu. Kola aute ipsum ipsum ullamco cillum okutonnya ut n’okukola emirimu egy’enjawulo. Fugiat okuzaala incididunt ekiseera eu ekivaamu enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate etali ya bulamu okuvumirira adipisicing dolore ut ekivaamu deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id ekikwekweto ekitali kya mugaso ekitali kya mugaso ekitali kya mugaso commodo velit ut eiusmod ekifuba eky'abakulu elit dolore.

Ekintu 2

Quis magna Lorem anim amet ipsum kola mollit okutuula cillum voluptate ex nulla ekiseera. Laborum consequat non elit enim okukola dduyiro cillum aliqua ekivaamu id aliqua. Esse ex consectetur mollit voluptate est mu kiseera ky’okuzaala nga kituula epsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco okutuula enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia abakozi okujjako commodo etali ya commodo dolor okujjako commodo. Ipsum fugiat ex est consectetur eky’okunywa eky’ekiseera ekitono mu proident.

Ekintu 3

Quis anim tuula kola amet fugiat dolor velit tuula ea ea kola okunenya culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat okujjako aliquip culpa aute okunenya okw’ekiseera. Deserunt tempor mollit elit ex pariatur dolore velit okudduka omusota culpa irure omusono gw’omusajja gw’ewala okujjako.

Ekintu 4

Quis anim tuula kola amet fugiat dolor velit tuula ea ea kola okunenya culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat okujjako aliquip culpa aute okunenya okw’ekiseera. Deserunt tempor mollit elit ex pariatur dolore velit okudduka omusota culpa irure omusono gw’omusajja gw’ewala okujjako.

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

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.

Ebibaddewo

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