in English

Scrollspy

Aġġorna awtomatikament in-navigazzjoni Bootstrap jew elenka l-komponenti tal-grupp ibbażati fuq il-pożizzjoni tal-iscroll biex tindika liema link hija attwalment attiva fil-viewport.

Kif taħdem

Scrollspy għandu ftit rekwiżiti biex jaħdem sew:

  • Jekk qed tibni JavaScript tagħna mis-sors, teħtieġutil.js .
  • Għandu jintuża fuq komponent Bootstrap nav jew grupp ta 'lista .
  • Scrollspy jirrikjedi position: relative;fuq l-element li qed tispija fuqu, normalment il- <body>.
  • Meta spying fuq elementi minbarra l- <body>, kun żgur li jkollok heightsett u overflow-y: scroll;applikati.
  • Ankri ( <a>) huma meħtieġa u għandhom jindikaw element ma ' dak id.

Meta tiġi implimentata b'suċċess, in-nav jew il-grupp tal-lista tiegħek ser jaġġorna kif xieraq, u jċaqlaq il- .activeklassi minn oġġett għall-ieħor ibbażat fuq il-miri assoċjati tagħhom.

Eżempju fin-navbar

Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. L-oġġetti dropdown se jiġu enfasizzati wkoll.

@xaħam

Kontenut ta' placeholder għall-eżempju scrollspy. Int sibt l-aqwa arkitettura. Bolol tal-passaporti, hi kożmopolitana. Fine, frisk, ħarxa, aħna ltqajna fuq lock. Qatt ma ppjanajt li xi darba nkun qed nitlifkom. Hi tiekol qalbek barra. Il-bewsa tiegħek hija kożmika, kull mossa hija maġija. Jiġifieri dawk, irrid ngħid bħal hi l-waħda. Tislijiet maħbubin ejja nieħdu vjaġġ. Just stess il-lejl bħall-4 ta 'Lulju! Imma tippreferi tinħela.

@mdo

Kontenut ta' placeholder għall-eżempju scrollspy. Għax hi l-muża u l-artist. (Dan hu kif nagħmlu) Allura trid tilgħab bil-maġija. Allura kun żgur qabel ma tagħtih kollu lili. Jien mixi, I'm walking on air (tonight). Aqbeż it-taħdita, smajtu kollox, ħin biex timxi l-mixja.

waħda

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

Kontenut ta' placeholder għall-eżempju scrollspy. Jekk trid tiżfen, jekk tridu kollox, taf li jien it-tfajla li għandek iċempel. Imxi permezz tal-maltemp nixtieq. Mela ħalluni nikseb il-libsa ta’ għeluqek. Il-wieħed li tbiegħed. Il-Ġimgħa li għaddiet filgħaxija, iva naħseb li kissru l-liġi, dejjem ngħidu li se nieqfu. 'Għax hi ftit Yoko, U hi ftit 'Oh no'. Irrid ix-xedaq droppin', għajnejn poppin', head turnin', body shockin'. Iva, għamilna l-massimu tal-karti tal-kreditu tagħna u tkeċċa mill-bar.

U xi kontenut ta' placeholder aktar, għal miżura tajba.

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

Eżempju b'nav nested

Scrollspy jaħdem ukoll ma nested .navs. Jekk nested .navhuwa .active, il-ġenituri tiegħu se jkunu wkoll .active. Skrollja ż-żona ħdejn in-navbar u ara l-bidla tal-klassi attiva.

Punt 1

Kontenut ta' placeholder għall-eżempju scrollspy. Din hija relatata mal-oġġett 1. Jieħdok mili għoli, daqshekk għoli, għax għandha dik it-tbissima internazzjonali waħda. Hemm barrani fis-sodda tiegħi, hemm taħbit f’rasi. Oh, le. F'ħajja oħra kont inġiegħlek toqgħod. Għax jien kapaċi għal kollox. Suiding up għall-battalja kuruna tiegħi. Użat biex tisraq il-likur tal-ġenituri tiegħek u titla’ fuq il-bejt. Ton, tan tajjeb u lest, dawwar it up kawża tagħha gettin' tqil. L-imħabba tagħha hija bħal droga. Naħseb li insejt li kelli għażla.

Punt 1-1

Kontenut ta' placeholder għall-eżempju scrollspy. Din tirrigwarda l-oġġett 1-1. Int sibt l-aqwa arkitettura. Bolol tal-passaporti, hi kożmopolitana. Fine, frisk, ħarxa, aħna ltqajna fuq lock. Qatt ma ppjanajt li xi darba nkun qed nitlifkom. Hi tiekol qalbek barra. Il-bewsa tiegħek hija kożmika, kull mossa hija maġija. Jiġifieri dawk, irrid ngħid bħal hi l-waħda. Tislijiet maħbubin ejja nieħdu vjaġġ. Just stess il-lejl bħall-4 ta 'Lulju! Imma tippreferi tinħela.

Punt 1-2

Kontenut ta' placeholder għall-eżempju scrollspy. Din tirrigwarda l-oġġett 1-2. L-imħabba tagħha hija bħal droga. It-tfajliet kollha tiegħi vintage Chanel baby. Ksibt motel u bnew forti bil-lożor. Għax hi l-muża u l-artist. (Dan hu kif nagħmlu) Allura trid tilgħab bil-maġija. Allura kun żgur qabel ma tagħtih kollu lili. Jien mixi, I'm walking on air (tonight). Aqbeż it-taħdita, smajtu kollox, ħin biex timxi l-mixja. Aqbadha jekk tista’. Tneks bħal naħla qlajt l-istrixxi.

Punt 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

Kontenut ta' placeholder għall-eżempju scrollspy. Din tirrigwarda l-oġġett 3-2. Int oriġinali, ma tistax tiġi sostitwita. Il-lejl kollu qed jilagħbu, il-kanzunetta tiegħek. Bniet California aħna innegabbli. Bħal għasfur mingħajr gaġġa. M'hemm l-ebda biża 'issa, itlaq u biss tkun ħielsa, inħobbok bla kundizzjoni. Nista’ nara l-kitba fuq il-ħajt. Tista 'tivvjaġġa d-dinja imma xejn ma jersaq qrib il-kosta tad-deheb.

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

Eżempju bil-lista-grupp

Scrollspy jaħdem ukoll ma ' .list-groups. Skrollja ż-żona ħdejn il-grupp tal-lista u ara l-bidla tal-klassi attiva.

Punt 1

Kontenut ta' placeholder għall-eżempju tal-grupp tal-lista scrollspy. Din tirrigwarda l-oġġett 1. M'għandekx bżonn apoloġija. M'hemm l-ebda biża 'issa, itlaq u biss tkun ħielsa, inħobbok bla kundizzjoni. Il-Ġimgħa li għaddiet filgħaxija. M'għandekx tkun raġel jitmeżmżu I'll bet li huwa sabiħ. Sajf wara l-iskola sekondarja meta ltqajna għall-ewwel darba. Għax hi l-muża u l-artist. Xiex? Stenna. Ħsibt li jien kont l-eċċezzjoni.

Punt 2

Kontenut ta' placeholder għall-eżempju tal-grupp tal-lista scrollspy. Din tirrigwarda l-oġġett 2. Yeah, hi żfin għall-taħbit tagħha stess. Oh, le. Inti stajt kont l-akbar. Għax, tarbija, int logħob tan-nar. Forsi raġuni għaliex il-bibien kollha huma magħluqa. Iftaħ qalbek u ħalliha tibda. Allura très chic, yeah, hi klassika.

Punt 3

Kontenut ta' placeholder għall-eżempju tal-grupp tal-lista scrollspy. Din tirrigwarda l-oġġett 3. Immorru ogħla u ogħla. Qatt wieħed mingħajr l-ieħor, għamilna patt. Jien mixi fuq l-arja. Xi ħadd qal li tneħħilek it-tatwaġġ. Issa qed niffrox bhal farfett. Ton, tan tajjeb u lest, dawwar it up kawża tagħha gettin' tqil. Minħabba li ladarba int tiegħi, ladarba int tiegħi. Int trid taqbad id-dawl u tħallih jiddi! Allura laqtu l-boulevard. Qatt tħossok, tħossok daqshekk irqiq tal-karta. Nara dan kollu, narah issa.

Punt 4

Kontenut ta' placeholder għall-eżempju tal-grupp tal-lista scrollspy. Din hija relatata mal-oġġett 4. Sajf wara l-iskola sekondarja meta ltqajna għall-ewwel darba. M'hemm l-ebda biża 'issa, itlaq u biss tkun ħielsa, inħobbok bla kundizzjoni. Ġilda kissed mix-xemx tant sħuna aħna nħallu l-popsicle tiegħek. Din l-imħabba se tagħmel inti levitate.

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

Użu

Via attributi tad-data

Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>). Imbagħad żid l- data-targetattribut bl-ID jew il-klassi tal-element ġenitur ta 'kwalunkwe .navkomponent 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>

Via JavaScript

Wara li żżid position: relative;fis-CSS tiegħek, ċempel l-iscrollspy permezz ta' JavaScript:

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

Miri ta' ID riżolvibbli meħtieġa

Ir-rabtiet tan-Navbar għandu jkollhom miri id risolvibbli. Per eżempju, <a href="#home">home</a>għandu jikkorrispondi għal xi ħaġa fid-DOM bħal <div id="home"></div>.

Elementi mhux :visiblefil-mira injorati

Elementi fil-mira li mhumiex :visibleskont jQuery se jiġu injorati u l-oġġetti tan-nav korrispondenti tagħhom qatt ma jiġu enfasizzati.

Metodi

.scrollspy('refresh')

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

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

.scrollspy('dispose')

Jeqred scrollspy ta' element.

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-offset="".

Isem Tip Default Deskrizzjoni
offset numru 10 Pixels biex ipattu minn fuq meta tikkalkula l-pożizzjoni tal-iscroll.
metodu spag auto Isib f'liema sezzjoni jinsab l-element spied. autoSe jagħżel l-aħjar metodu biex tikseb il-koordinati tal-iscroll. offsetse juża jQuery offset metodu biex tikseb iscroll koordinati. positionse tuża l-metodu tal-pożizzjoni jQuery biex tikseb il-koordinati tal-iscroll.
mira spag | Oġġett jQuery | Element DOM Jispeċifika l-element biex japplika Scrollspy plugin.

Avvenimenti

Tip ta' Avveniment Deskrizzjoni
attivate.bs.scrollspy Dan l-avveniment jispara fuq l-element tal-iscroll kull meta oġġett ġdid jiġi attivat mill-iscrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})