Source

Scrollspy

Sabunta kewayawa ta Bootstrap ta atomatik ko jera abubuwan rukuni bisa ga matsayin gungura don nuna wace hanyar haɗin ke aiki a halin yanzu a tashar kallo.

Yadda yake aiki

Scrollspy yana da ƴan buƙatu don yin aiki da kyau:

  • Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js .
  • Dole ne a yi amfani da shi akan bangaren Bootstrap nav ko jerin rukuni .
  • Scrollspy yana buƙatar position: relative;abubuwan da kuke leƙo asirin ƙasa, yawanci <body>.
  • Lokacin yin leken asiri akan wasu abubuwan ban da <body>, tabbatar an sami heightsaiti kuma overflow-y: scroll;a yi amfani da su.
  • Ana buƙatar anka ( <a>) kuma dole ne su nuna wani kashi mai wannan id.

Lokacin da aka yi nasarar aiwatarwa, nav ɗinku ko ƙungiyar jeri za su ɗaukaka daidai da haka, suna matsar da .activeajin daga abu ɗaya zuwa na gaba dangane da makasudin haɗin gwiwa.

Misali a cikin navbar

Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka abubuwan da aka zazzage su ma.

@mai

Ad leggings keytar, brunch id art party dolor laborre. Pitchfork yr enim lo-fi kafin su sayar da qui. Tumblr gona-zuwa tebur haƙƙin keke komai. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby suwaita lomo Jean shorts, williamsburg hoodie minim qui mai yiwuwa ba ku ji labarin su ba da cardigan Trust fund culpa biodiesel wes anderson aesthetical. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@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 messenger jakar marfa duk abin da motar abinci ta delectus. Sapiente synth id zatonnda. Locavore sed helvetica cliche irony, tsawa mai yiwuwa ba ku ji labarin su ba sakamakon hoodie gluten-free lo-fi fap aliquip. Labour elit placeat kafin su sayar da su, Terry Richardson proident brunch nesciunt quis cosby suweter pariatur keffiyeh ut helvetica artisan. Cardigan craft giya seitan readymade velit. VHS chambray labs na dan lokaci veniam. Anim mollit minim commodo ullamco thundercats.

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

Misali tare da nav

Scrollspy kuma yana aiki tare da nsted .navs. Idan gida .navne .active, iyayensa ma za su kasance .active. Gungura wurin da ke kusa da maɓallin kewayawa kuma duba canjin aji mai aiki.

Abu na 1

Ex consequat commodo adipisicing exercitation aute banda mu occaecat ullamco duis aliqua id magna ullamco eu. Ka yi la'akari da yin aiki tare da juna. Fugiat laborum ya faru na ɗan lokaci kuma hakan ya haifar da ƙarin haske. Ba za a yi watsi da nulla magna eiusmod consectetur a cikin. Azatip Nulla Enim Veisniam Ice Kogin Nulla Elit Cupittam Nulla Elit Cupittat

Abu na 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem da occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Zauna fitacciyar ullamco aute magna pariatur nostrud labour. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate banda minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labure adipisicing sint dolor elit cillum anim et fugiat.

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

Labour sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit yi. Mollit excepteur eu Lorem ipsum anim commodo sint laborre Lorem a cikin motsa jiki velit inciddunt. Da fatan za a yi la'akari da su a cikin manyan abubuwan da suka faru na wasan motsa jiki da kuma ofishi. Yi la'akari da sakamakon aikin aiki na yau da kullun. Zauna na ɗan lokaci kaɗan a cikin veniam culpa aliqua excepteur 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">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 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>

Misali tare da rukuni-rukuni

Scrollspy kuma yana aiki tare da .list-groups. Gungura yankin kusa da rukunin jerin kuma duba canjin aji mai aiki.

Abu na 1

Ex consequat commodo adipisicing exercitation aute banda mu occaecat ullamco duis aliqua id magna ullamco eu. Ka yi la'akari da yin aiki tare da juna. Fugiat laborum ya faru na ɗan lokaci kuma hakan ya haifar da ƙarin haske. Ba za a yi watsi da nulla magna eiusmod consectetur a cikin. Azatip Nulla Enim Veisniam Ice Kogin Nulla Elit Cupittam Nulla Elit Cupittat

Abu na 2

Yana da mahimmanci ga Lorem anim amet ipsum don 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 Laborum officia laborum banda commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Abu na 3

Quis anim sit don amet fugiat dolor velit sit ea ea don rerehenderit culpa duis. Babu shakka za a yi la'akari da abin da ya faru idan aka kwatanta da lokacin da aka sake maimaitawa. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco banda.

Abu na 4

Quis anim sit don amet fugiat dolor velit sit ea ea don rerehenderit culpa duis. Babu shakka za a yi la'akari da abin da ya faru idan aka kwatanta da lokacin da aka sake maimaitawa. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco banda.

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

Amfani

Ta hanyar bayanan halayen

Don ƙara halayyar scrollspy cikin sauƙi zuwa kewayawa na saman mashaya, ƙara data-spy="scroll"zuwa ɓangaren da kuke son yin rahõto a kai (mafi yawanci wannan shine <body>). Sannan ƙara data-targetsifa tare da ID ko aji na ɓangaren mahaifa na kowane .navɓangaren 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>

Ta hanyar JavaScript

Bayan ƙara position: relative;a cikin CSS ɗin ku, kira gungurawa ta hanyar JavaScript:

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

Ana buƙatar makasudin ID mai warwarewa

Dole ne hanyoyin haɗin Navbar su kasance da maƙasudin id masu warwarewa. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin DOM kamar <div id="home"></div>.

Abubuwan :visibleda ba manufa ba sun yi watsi da su

Abubuwan da ba su :visibledace da jQuery ba za a yi watsi da su kuma ba za a taɓa haskaka abubuwan da suka dace ba.

Hanyoyin

.scrollspy('refresh')

Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:

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

.scrollspy('dispose')

Yana lalata rubutun gungurawa.

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset="".

Suna Nau'in Default Bayani
biya diyya lamba 10 Pixels don kashewa daga sama yayin ƙididdige matsayi na gungurawa.

Abubuwan da suka faru

Nau'in Taron Bayani
kunna.bs.scrollspy Wannan taron yana ƙone ɓangaren gungurawa a duk lokacin da sabon abu ya kunna ta hanyar gungurawa. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something…
})