in English

Scrollspy

Fa'afou otometi le Bootstrap navigation po'o le lisi o vaega vaega e fa'atatau i le tulaga ta'ai e fa'ailoa ai po'o fea so'otaga o lo'o galue i le va'aiga.

E faapefea ona galue

Scrollspy ei ai ni nai mana'oga e galue lelei:

  • Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js .
  • E tatau ona fa'aogaina i luga o se vaega Bootstrap nav po'o se vaega lisi .
  • Scrollspy e manaʻomia position: relative;le elemene o loʻo e vaʻavaʻai i ai, e masani lava o le <body>.
  • A e vaʻavaʻai i elemene e ese mai i le <body>, ia mautinoa e iai se heightseti ma overflow-y: scroll;faʻaoga.
  • O taula ( <a>) e mana'omia ma e tatau ona faasino i se elemene o lo'o iai lena id.

A manuia le fa'atinoina, o lau nav po'o le lisi o vaega o le a fa'afouina e tusa ai, ma fa'agasolo le .activevasega mai le tasi mea i le isi e fa'atatau i a latou fa'atatauga.

Faataitaiga i le navbar

Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. O mea e pa'u i lalo o le a fa'ailogaina fo'i.

@ga'o

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy. Ua e maua le fausaga sili ona lelei. Faailoga tusifolau, o ia o le lalolagi. Lelei, fou, saua, na matou maua i le loka. E le'i fuafuaina lava e i ai se aso o le a ou leiloa ai oe. Na te 'ai lou loto. O lau kisi o le lagi, o gaioiga uma o se togafiti. O le uiga o la'u tala, o le uiga o la'u tala e pei o ia. Talofa e pele ia tatou malaga. Na'o le umiaina o le po e pei o le aso 4 o Iulai! Ae e sili atu lou maumau.

@mdo

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy. Aua o ia o le muse ma le tusiata. (O le auala lea matou te faia) O lea e te manaʻo e taʻalo i togafiti faʻataulāitu. O lea ia mautinoa ae e te leʻi tuʻuina atu uma ia te aʻu. Ou te savali, ou te savali i luga o le ea (nanei). Faamisi le lauga, faalogo i ai, taimi e savali ai i le savaliga.

tasi

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

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy. Afai e te fia siva, afai e te manaʻo i mea uma, e te iloa o aʻu o le teine ​​e tatau ona e valaʻau. Savali i le afa ou te manao ai. Se'i ou avatu oe i lou suti o lou aso fanau. Le na sola ese. O le po o le Aso Faraile talu ai, ioe ou te manatu ua tatou solia le tulafono, fai mai o le a tatou taofi. 'Aua o ia o sina mea itiiti o Yoko, Ma o ia o sina 'Oi leai'. Ou te manao i le auvae pa'u', mata poppin', ulu ulu', tino faate'ia'. Ioe, ua sili atu a matou kata fai aitalafu ma tuli ese ai mai le pa.

Ma nisi mea e teu ai nofoaga, mo se fua lelei.

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

Fa'aa'oa'oga fa'atasi ma fa'anofo nav

E galue fo'i Scrollspy i fa'aputuga .navs. Afai o se faamoega , .nave .activefaapena foi ona matua .active. Fa'asolo le vaega i tafatafa o le navbar ma matamata le suiga o le vasega.

Aitema 1

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy. O le mea lea e fa'atatau i le mea 1. E alu ai oe i maila e maualuga, maualuga tele, 'aua o lo'o ia te ia lena laufofoga fiafia fa'avaomalo. O loʻo i ai se tagata ese i loʻu moega, o loʻo i ai se tuʻi i loʻu ulu. Oi, leai. I se isi olaga ou te faia oe e nofo ai. Aua o a'u, ou te mafaia soo se mea. E fetaui mo la'u taua faapaleina. Sa masani ona gaoi le ava a ou matua ma a'e i luga o le fale. Leo, lanu enaena ma sauni, liliu i luga ona o lona mamafa. O lona alofa e pei o se fualaau faasaina. Ou te masalo ua galo ia te au sa i ai sau filifiliga.

Aitema 1-1

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy. O lenei mea e fa'atatau i le mea 1-1. Ua e maua le fausaga sili ona lelei. Faailoga tusifolau, o ia o le lalolagi. Lelei, fou, saua, na matou maua i le loka. E le'i fuafuaina lava e i ai se aso o le a ou leiloa ai oe. Na te 'ai lou loto. O lau kisi o le lagi, o gaioiga uma o se togafiti. O le uiga o la'u tala, o le uiga o la'u tala e pei o ia. Talofa e pele ia tatou malaga. Na'o le umiaina o le po e pei o le aso 4 o Iulai! Ae e sili atu lou maumau.

Aitema 1-2

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

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy. O le mea lea e fa'atatau i le mea 3-2. O oe o le mea muamua, e le mafai ona suia. O le po atoa latou te taaalo, lau pese. O teine ​​Kalefonia e le mafaafitia i matou. E pei o se manulele e leai sona pa. E leai se fefe i le taimi nei, tuʻu ese ma naʻo le saʻoloto, ou te alofa ia te oe e aunoa ma se faatuaoia. E mafai ona ou iloa atu tusitusiga i luga o le puipui. E mafai ona e faimalaga i le lalolagi ae leai se mea e latalata i le talafatai auro.

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

Faataitaiga ma lisi-vaega

E galue foi Scrollspy ma .list-groups. Fa'asolo le vaega i talaane o le vaega o le lisi ma matamata le suiga o le vasega.

Aitema 1

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy list-group. Ole mea lea e fa'atatau ile mea 1. E le mana'omia se fa'atoesega. E leai se fefe i le taimi nei, tuʻu ese ma naʻo le saʻoloto, ou te alofa ia te oe e aunoa ma se faatuaoia. O le po o le Aso Faraile talu ai. Aua e te matamuli ise tama ou te mate e aulelei. Summer ina ua uma le aoga maualuga i le taimi muamua na matou feiloai ai. Aua o ia o le muse ma le tusiata. O le ā? Faatali. Na ou manatu o aʻu o se tuusaunoaga.

Aitema 2

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy list-group. O le mea lea e fa'atatau i le mea 2. Ioe, e siva i lana lava pa'u. Oi, leai. E mafai ona e sili. Aua, pepe, o oe o se afi. Atonu o se mafuaaga ua tapunia uma ai faitotoa. Tatala lou loto ma tau lava ina amata. E matua manaia lava, ioe, o ia o se masani.

Aitema 3

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy list-group. O le mea lea e fa'atatau i le mea 3. Matou te alu i luga ma maualuga atu. E leai se tasi e aunoa ma le isi, sa matou faia se feagaiga. Ou te savali i luga o le ea. Fai mai se tasi ua aveese lau pe'a. O lea ua ou opeopea e pei o se pepe. Leo, lanu enaena ma sauni, liliu i luga ona o lona mamafa. Aua o le taimi lava e avea ai oe ma aʻu, o le taimi lava e te aʻu. E tatau lava ona e tutuina le moli ma faasusulu atu! O lea na matou taia ai le auala. E te lagona ea, lagona le manifinifi pepa. Ua ou vaai i ai, ua ou vaai i ai nei.

Aitema 4

Mea e teu ai nofoaga mo le fa'ata'ita'iga scrollspy list-group. O le mea lea e fa'atatau i le mea 4. Taumafanafana ina ua uma le a'oga maualuga i le taimi muamua na matou feiloa'i ai. E leai se fefe i le taimi nei, tuʻu ese ma naʻo le saʻoloto, ou te alofa ia te oe e aunoa ma se faatuaoia. O le pa'u sogi-la e vevela tele o le a matou liusuavai ai lau popsicle. O lenei alofa o le a faʻafefe ai oe.

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

Fa'aoga

E ala i fa'amaumauga uiga

Ina ia fa'afaigofie ona fa'aopoopo le amio ta'avale i lau ta'avale pito i luga, fa'aopoopo data-spy="scroll"i le elemene e te mana'o e sipai ai (sili ona masani o le <body>). Ona faʻaopoopo lea o le data-targetuiga faʻatasi ma le ID poʻo le vasega o le matua elemene o soʻo se .navvaega 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>

E ala i le JavaScript

A uma ona faʻaopoopo position: relative;i lau CSS, valaʻau le scrollspy e ala i le JavaScript:

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

E mana'omia ni fa'ailoga ID e mafai ona fo'ia

O feso'ota'iga Navbar e tatau ona i ai ni fa'ailoga id e mafai ona fo'ia. Mo se faʻataʻitaʻiga, e <a href="#home">home</a>tatau ona fetaui ma se mea i le DOM pei <div id="home"></div>.

O :visibleelemene e le fa'atatauina ua le amana'ia

O elemene faʻatatau e le :visibletusa ai ma le jQuery o le a le amanaʻia ma o latou mea nav fetaui o le a le faʻamaonia lava.

Metotia

.scrollspy('refresh')

A faʻaaoga le scrollspy faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e tatau ona e valaʻau le auala faʻafouina e pei o lea:

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

.scrollspy('dispose')

Fa'aleagaina le ta'avale a se elemene.

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
fa'apena numera 10 Pixels e fa'asolo mai luga pe a fa'atatau le tulaga o le ta'ai.
auala manoa ta'avale Su'e po'o fea vaega o lo'o i ai le elemene spied. autoo le a filifili le auala sili e maua ai fa'asologa ta'ai. offseto le a faʻaogaina le jQuery offset method e maua ai faʻasalalauga taʻavale. positiono le a faʻaogaina le tulaga o le jQuery e maua ai faʻamaumauga taʻavale.
sini manoa | jQuery mea | DOM elemene Fa'amaoti elemene e fa'aoga ai le Scrollspy plugin.

Mea na tutupu

Ituaiga Mea Fa'amatalaga
activate.bs.scrollspy O lenei mea na tupu e mu i luga o le elemene taʻavale i soo se taimi e faʻagaoioia ai se mea fou e le scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})