in English

Scrollspy

Automātiski atjauniniet Bootstrap navigācijas vai saraksta grupas komponentus, pamatojoties uz ritināšanas pozīciju, lai norādītu, kura saite pašlaik ir aktīva skatvietā.

Kā tas strādā

Lai Scrollspy pareizi darbotos, ir jāievēro dažas prasības:

  • Ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.js .
  • Tas ir jāizmanto Bootstrap navigācijas komponentā vai sarakstu grupā .
  • Scrollspy pieprasa position: relative;elementu, kuru izspiegojat, parasti <body>.
  • Izspiegojot citus elementus, nevis <body>, noteikti ir jābūt heightiestatītam un overflow-y: scroll;lietotam.
  • Enkuri ( <a>) ir nepieciešami, un tiem jānorāda uz elementu ar to id.

Kad tas būs veiksmīgi ieviests, jūsu navigācijas vai sarakstu grupa tiks attiecīgi atjaunināta, pārvietojot .activeklasi no viena vienuma uz nākamo, pamatojoties uz saistītajiem mērķiem.

Piemērs navigācijas joslā

Ritiniet apgabalu zem navigācijas joslas un skatieties, kā mainās aktīvā klase. Tiks izcelti arī nolaižamās izvēlnes vienumi.

@resns

Viettura saturs scrollspy piemēram. Jums ir vislabākā arhitektūra. Pases zīmogi, viņa ir kosmopolītiska. Labs, svaigs, nikns, mēs to saņēmām. Nekad nebiju plānojis, ka kādu dienu es tevi pazaudēšu. Viņa izēd tavu sirdi. Tavs skūpsts ir kosmisks, katra kustība ir maģiska. Es domāju tās, es domāju kā viņa ir tā. Sveicieni, mīļie, dosimies ceļojumā. Vienkārši pieder nakts, piemēram, 4. jūlijs! Bet jūs labāk iztērējat.

@mdo

Viettura saturs scrollspy piemēram. Jo viņa ir mūza un māksliniece. (Tā mēs darām) Tātad jūs vēlaties spēlēt ar maģiju. Tāpēc esiet pārliecināts, pirms atdodat to visu man. Es eju, es eju pa gaisu (šovakar). Izlaist sarunu, visu dzirdēju, laiks staigāt.

viens

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

Viettura saturs scrollspy piemēram. Ja vēlaties dejot, ja vēlaties to visu, jūs zināt, ka es esmu tā meitene, kurai jums vajadzētu piezvanīt. Staigāt cauri vētrai es gribētu. Ļaujiet man ietērpt jūs dzimšanas dienas uzvalkā. Tas, kurš tika prom. Pagājušajā piektdienas vakarā, jā, es domāju, ka mēs pārkāpām likumu, vienmēr sakiet, ka mēs beigsim. Jo viņa ir mazliet Joko, un viņa ir mazliet "Ak nē". Es gribu, lai žoklis atkrīt, acis atkrīt, galva pagriežas, ķermenis šokē. Jā, mēs maksimāli izmantojām kredītkartes un tikām padzīti no bāra.

Un vēl kāds viettura saturs labam.

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

Piemērs ar ligzdotu navigāciju

Scrollspy darbojas arī ar ligzdotiem .navs. Ja ligzdots .navir .active, tā vecāki arī būs .active. Ritiniet apgabalu blakus navigācijas joslai un skatieties, kā mainās aktīvā klase.

1. punkts

Viettura saturs scrollspy piemēram. Šis attiecas uz 1. vienumu. Aizved jūs jūdzes augstu, tik augstu, jo viņai ir viens starptautiskais smaids. Manā gultā ir svešinieks, manā galvā dauzās. Ak nē. Citā dzīvē es liktu tev palikt. Jo es esmu spējīgs uz jebko. Piemērots manai vainaga cīņai. Izmanto, lai nozagtu tavu vecāku dzērienu un uzkāptu uz jumta. Tonis, iedegums un gatavs, pastipriniet to, jo tas kļūst smags. Viņas mīlestība ir kā narkotika. Man šķiet, ka esmu aizmirsis, ka man ir izvēle.

1-1

Viettura saturs scrollspy piemēram. Šis attiecas uz 1-1. Jums ir vislabākā arhitektūra. Pases zīmogi, viņa ir kosmopolītiska. Labs, svaigs, nikns, mēs to saņēmām. Nekad nebiju plānojis, ka kādu dienu es tevi pazaudēšu. Viņa izēd tavu sirdi. Tavs skūpsts ir kosmisks, katra kustība ir maģiska. Es domāju tās, es domāju kā viņa ir tā. Sveicieni, mīļie, dosimies ceļojumā. Vienkārši pieder nakts, piemēram, 4. jūlijs! Bet jūs labāk iztērējat.

1.-2. punkts

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

Viettura saturs scrollspy piemēram. Šis attiecas uz 3-2. Jūs esat oriģināls, to nevar aizstāt. Visu nakti viņi spēlē jūsu dziesmu. Kalifornijas meitenes, mēs esam nenoliedzami. Kā putns bez būra. Tagad nav nekādu baiļu, atlaidies un vienkārši esi brīvs, es tevi mīlēšu bez nosacījumiem. Es redzu uzrakstu uz sienas. Jūs varētu ceļot pa pasauli, bet nekas netuvojas zelta krastam.

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

Piemērs ar sarakstu grupu

Scrollspy darbojas arī ar .list-groups. Ritiniet apgabalu blakus saraksta grupai un skatieties aktīvās klases izmaiņas.

1. punkts

Viettura saturs scrollspy saraksta grupas piemēram. Šis attiecas uz 1. vienumu. Nav nepieciešams atvainoties. Tagad nav nekādu baiļu, atlaidies un vienkārši esi brīvs, es tevi mīlēšu bez nosacījumiem. Pagājušās piektdienas nakts. Neesiet kautrīgs puisis, es varu derēt, ka tas ir skaisti. Vasara pēc vidusskolas, kad mēs pirmo reizi satikāmies. Jo viņa ir mūza un māksliniece. Kas? Pagaidiet. Domāju, ka esmu izņēmums.

2. punkts

Viettura saturs scrollspy saraksta grupas piemēram. Šis attiecas uz 2. vienumu. Jā, viņa dejo pēc sava ritma. Ak nē. Tu varēji būt lielākais. Jo, mazulīt, tu esi salūts. Varbūt iemesls, kāpēc visas durvis ir aizvērtas. Atveriet savu sirdi un ļaujiet tai sākt. Tik ļoti šika, jā, viņa ir klasika.

3. punkts

Viettura saturs scrollspy saraksta grupas piemēram. Šis attiecas uz 3. punktu. Mēs ejam augstāk un augstāk. Nekad viens bez otra, mēs noslēdzām līgumu. Es eju pa gaisu. Kāds teica, ka tev ir noņemts tetovējums. Tagad es peldu kā tauriņš. Tonis, iedegums un gatavs, pastipriniet to, jo tas kļūst smags. Jo reiz tu esi mans, kad tu esi mans. Jums vienkārši jāiededzina gaisma un jāļauj tai spīdēt! Tā nu trāpījām bulvārī. Vai jūs kādreiz jūtaties, jūtaties tik papīra plānas. Es to visu redzu, es to redzu tagad.

4. punkts

Viettura saturs scrollspy saraksta grupas piemēram. Šis attiecas uz 4. punktu. Vasara pēc vidusskolas, kad mēs pirmo reizi tikāmies. Tagad nav nekādu baiļu, atlaidies un vienkārši esi brīvs, es tevi mīlēšu bez nosacījumiem. Saules skūpstītā āda ir tik karsta, ka mēs izkausēsim jūsu popsi. Šī mīlestība liks jums levitēt.

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

Lietošana

Izmantojot datu atribūtus

Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, pievienojiet data-spy="scroll"elementu, kuru vēlaties izspiegot (parasti tas ir <body>). Pēc tam pievienojiet atribūtu ar jebkura Bootstrap komponenta data-targetvecākelementa ID vai klasi ..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>

Izmantojot JavaScript

Pēc position: relative;CSS pievienošanas izsauciet scrollspy, izmantojot JavaScript:

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

Nepieciešami atrisināmi ID mērķi

Navigācijas joslas saitēm ir jābūt atrisināmiem ID mērķiem. Piemēram, <a href="#home">home</a>ir jāatbilst kaut kam DOM, piemēram, <div id="home"></div>.

Elementi :visible, kas nav mērķa elementi, ir ignorēti

Mērķa elementi, kas neatbilst :visiblejQuery , tiks ignorēti, un tiem atbilstošie navigācijas vienumi nekad netiks izcelti.

Metodes

.scrollspy('refresh')

Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:

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

.scrollspy('dispose')

Iznīcina elementa scrollspy.

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-offset="".

Vārds Tips Noklusējums Apraksts
kompensēt numuru 10 Pikseļi, kas jānobīda no augšas, aprēķinot ritināšanas pozīciju.
metodi stīga auto Atrod, kurā sadaļā atrodas izspiegotais elements. autoTas izvēlēsies labāko metodi ritināšanas koordinātu iegūšanai. offsetizmantos jQuery nobīdes metodi, lai iegūtu ritināšanas koordinātas. positionizmantos jQuery pozīcijas metodi, lai iegūtu ritināšanas koordinātas.
mērķis stīga | jQuery objekts | DOM elements Norāda elementu, kam lietot spraudni Scrollspy.

Pasākumi

Pasākuma veids Apraksts
activate.bs.scrollspy Šis notikums tiek aktivizēts ritināšanas elementā ikreiz, kad scrollspy aktivizē jaunu vienumu. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})