in English

Scrollspy

Ṣe imudojuiwọn lilọ kiri Bootstrap ni adaṣe tabi ṣe atokọ awọn paati ẹgbẹ ti o da lori ipo yi lọ lati tọka iru ọna asopọ ti n ṣiṣẹ lọwọlọwọ ni wiwo wiwo.

Bawo ni o ṣe n ṣiṣẹ

Scrollspy ni awọn ibeere diẹ lati ṣiṣẹ daradara:

  • Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .
  • O gbọdọ lo lori paati Bootstrap nav tabi ẹgbẹ atokọ .
  • Scrollspy nbeere position: relative;lori eroja ti o ṣe amí lori, nigbagbogbo <body>.
  • Nigbati o ba ṣe amí lori awọn eroja miiran yatọ si <body>, rii daju pe o heightṣeto ati overflow-y: scroll;lo.
  • Awọn ìdákọró ( <a>) ni a nilo ati pe o gbọdọ tọka si nkan kan pẹlu iyẹn id.

Nigbati imuse aṣeyọri, nav rẹ tabi ẹgbẹ atokọ yoo ṣe imudojuiwọn ni ibamu, gbigbe .activekilasi lati ohun kan si ekeji ti o da lori awọn ibi-afẹde ti o somọ wọn.

Apeere ni navbar

Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.

@sanra

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. O ni awọn dara julọ faaji. Awọn ontẹ iwe irinna, o ni agba aye. Dara, alabapade, imuna, a ni lori titiipa. Maṣe gbero pe ni ọjọ kan Emi yoo padanu rẹ. O jẹ ọkan rẹ jade. Ifẹnukonu rẹ jẹ agba aye, gbogbo gbigbe jẹ idan. Mo tumọ si awọn, Mo tumọ si pe oun ni ọkan. Ẹ kí àwọn olólùfẹ́ ẹ jẹ́ kí a rìnrìn àjò. Kan ni alẹ bi 4th ti Keje! Sugbon o yoo kuku gba asan.

@mdo

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Nitoripe oun ni musiọmu ati olorin. (Bawo ni a ṣe n ṣe) Nitorina o fẹ ṣere pẹlu idan. Nitorinaa rii daju ṣaaju ki o to fi gbogbo rẹ fun mi. Mo n rin, Mo n rin lori afẹfẹ (alẹ oni). Rekọja ọrọ naa, gbọ gbogbo rẹ, akoko lati rin.

ọkan

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. O gba ọ ni awọn maili ga, giga ga, nitori pe o ni ẹrin kariaye kan yẹn. Alejo kan wa lori ibusun mi, o n lu mi ni ori. Oh, rara. Ni igbesi aye miiran Emi yoo jẹ ki o duro. Nitori emi, Mo wa lagbara ti ohunkohun. Ti o baamu fun ogun ade mi. Ti a lo lati ji ọti ti awọn obi rẹ ati gun oke orule. Ohun orin, Tan fit ati ki o setan, tan o soke fa awọn oniwe-gettin 'eru. Ifẹ rẹ dabi oogun. Mo gboju le won pe mo ti gbagbe Mo ni yiyan.

meji

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. O to akoko lati mu awọn fọndugbẹ nla jade. Mo n rin, Mo n rin lori afẹfẹ (alẹ oni). Bẹẹni, a ti pọ si awọn kaadi kirẹditi wa ati pe a gba jade kuro ninu igi. Yo, kigbe si gbogbo eyin omode, rira ise igo, pelu owo iyalo yin. Emi ni ma gba okan re ije ninu ara mi sokoto-ju. Ti o ba ni aye o dara julọ lati tọju rẹ. Yo, kigbe si gbogbo eyin omode, rira ise igo, pelu owo iyalo yin.

mẹta

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Ti o ba fẹ jo, ti o ba fẹ gbogbo rẹ, o mọ pe emi ni ọmọbirin ti o yẹ ki o pe. Rin nipasẹ iji Emi yoo. Nitorinaa jẹ ki n gba ọ ni aṣọ ọjọ-ibi rẹ. Ọkan ti o lọ kuro. Ni alẹ ọjọ Jimọ to kọja, Bẹẹni Mo ro pe a ṣẹ ofin, nigbagbogbo sọ pe a ma duro. Nitoripe o jẹ diẹ ti Yoko, O si jẹ diẹ ti 'Oh rara'. Mo fẹ awọn bakan droppin', oju poppin', ori turnin', ara shockin'. Bẹẹni, a ti pọ si awọn kaadi kirẹditi wa ati pe a gba jade kuro ninu igi.

Ati diẹ ninu awọn akoonu ibi-aye diẹ sii, fun iwọn to dara.

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

Apeere pẹlu iteeye nav

Scrollspy tun ṣiṣẹ pẹlu iteeye .navs. Ti itẹ-ẹiyẹ .navba jẹ .active, awọn obi rẹ yoo tun jẹ .active. Yi lọ si agbegbe lẹgbẹẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ.

Nkan 1

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eleyi ọkan tijoba si ohun kan 1. Mu o km ga, ki ga, 'nitori o ni wipe ọkan okeere ẹrin. Alejo kan wa lori ibusun mi, o n lu mi ni ori. Oh, rara. Ni igbesi aye miiran Emi yoo jẹ ki o duro. Nitori emi, Mo wa lagbara ti ohunkohun. Ti o baamu fun ogun ade mi. Ti a lo lati ji ọti ti awọn obi rẹ ati gun oke orule. Ohun orin, Tan fit ati ki o setan, tan o soke fa awọn oniwe-gettin 'eru. Ifẹ rẹ dabi oogun. Mo gboju le won pe mo ti gbagbe Mo ni yiyan.

Nkan 1-1

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eyi ni ibatan si nkan 1-1. O ni awọn dara julọ faaji. Awọn ontẹ iwe irinna, o ni agba aye. Dara, alabapade, imuna, a ni lori titiipa. Maṣe gbero pe ni ọjọ kan Emi yoo padanu rẹ. O jẹ ọkan rẹ jade. Ifẹnukonu rẹ jẹ agba aye, gbogbo gbigbe jẹ idan. Mo tumọ si awọn, Mo tumọ si pe oun ni ọkan. Ẹ kí àwọn olólùfẹ́ ẹ jẹ́ kí a rìnrìn àjò. Kan ni alẹ bi 4th ti Keje! Sugbon o yoo kuku gba asan.

Nkan 1-2

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eyi ni ibatan si nkan 1-2. Ifẹ rẹ dabi oogun. Gbogbo mi odomobirin ojoun Chanel omo. Ni a Ile itura ati ki o kọ a Fort jade ti sheets. Nitoripe oun ni musiọmu ati olorin. (Bawo ni a ṣe n ṣe) Nitorina o fẹ ṣere pẹlu idan. Nitorinaa rii daju ṣaaju ki o to fi gbogbo rẹ fun mi. Mo n rin, Mo n rin lori afẹfẹ (alẹ oni). Rekọja ọrọ naa, gbọ gbogbo rẹ, akoko lati rin rin. Mu u ti o ba le. Tita bi oyin Mo gba awọn ila mi.

Nkan 2

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eyi ni ibatan si nkan 2. Ko nilo idariji. Ko si iberu bayi, jẹ ki o lọ ki o kan ni ominira, Emi yoo nifẹ rẹ lainidi. Ale ojo Jimo ti o koja. Maṣe jẹ eniyan itiju ti Emi yoo tẹtẹ pe o lẹwa. Ooru lẹhin ile-iwe giga nigba ti a akọkọ pade. Nitoripe oun ni musiọmu ati olorin. Kini? Duro. Rara, rara, rara, rara. Ro wipe mo ti wà awọn sile.

Nkan 3

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eyi ni ibatan si nkan 3. Ọrọ ni opopona, o ni nkankan lati fihan mi, emi. Gbogbo owo yi ko le ra mi ẹrọ akoko kan. Ṣe bi ọjọ-ibi rẹ lojoojumọ. Nitorina a lu boulevard. O jẹ ki n rilara pe Mo n gbe ala ọdọmọkunrin kan, ọna ti o yi mi pada Rekọja ọrọ naa, gbọ gbogbo rẹ, akoko lati rin irin-ajo naa. Ọrọ ni opopona, o ni nkankan lati fihan mi, mi. Kì í ṣe ọ̀rọ̀ ńlá, kì í ṣe ọ̀rọ̀ ńlá, kì í ṣe ohun ńlá.

Nkan 3-1

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eyi ni ibatan si nkan 3-1. Ọmọ ṣe o agbodo lati ṣe eyi? Eyi kii ṣe adehun nla. Bẹẹni, o ni orire ti o ba wa lori ọkọ ofurufu rẹ. Kan ni alẹ bi 4th ti Keje! Duro ni iwaju iwaju nigbati awọn bombu bẹrẹ lati ṣubu. Nitorinaa rii daju ṣaaju ki o to fi gbogbo rẹ fun mi.

Nkan 3-2

Akoonu ibi ipamọ fun apẹẹrẹ scrollspy. Eyi ni ibatan si nkan 3-2. O jẹ atilẹba, ko le paarọ rẹ. Ni gbogbo oru ni wọn nṣere, orin rẹ. California odomobirin a undeniable. Bi eye ti ko ni agọ ẹyẹ. Ko si iberu bayi, jẹ ki o lọ ki o kan ni ominira, Emi yoo nifẹ rẹ lainidi. Mo ti le ri awọn kikọ lori ogiri. O le rin irin-ajo agbaye ṣugbọn ko si ohun ti o sunmọ eti okun goolu.

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

Apẹẹrẹ pẹlu ẹgbẹ-akojọ

Scrollspy tun ṣiṣẹ pẹlu awọn .list-groups. Yi lọ si agbegbe lẹgbẹẹ ẹgbẹ atokọ ki o wo iyipada kilasi ti nṣiṣe lọwọ.

Nkan 1

Akoonu ibi ipamọ fun apẹẹrẹ akojọpọ-ẹgbẹ scrollspy. Eyi ni ibatan si nkan 1. Ko nilo idariji. Ko si iberu bayi, jẹ ki o lọ ki o kan ni ominira, Emi yoo nifẹ rẹ lainidi. Ale ojo Jimo ti o koja. Maṣe jẹ eniyan itiju ti Emi yoo tẹtẹ pe o lẹwa. Ooru lẹhin ile-iwe giga nigba ti a akọkọ pade. Nitoripe oun ni musiọmu ati olorin. Kini? Duro. Ro wipe mo ti wà awọn sile.

Nkan 2

Akoonu ibi ipamọ fun apẹẹrẹ akojọpọ-ẹgbẹ scrollspy. Eyi ni ibatan si nkan 2. Bẹẹni, o jo si lilu tirẹ. Oh, rara. O le ti jẹ ẹni ti o ga julọ. Nitori, ọmọ, o jẹ iṣẹ ina. Boya idi kan ti gbogbo awọn ilẹkun ti wa ni pipade. Ṣii ọkan rẹ silẹ ki o kan jẹ ki o bẹrẹ. Nitorina très yara, bẹẹni, o jẹ Ayebaye kan.

Nkan 3

Akoonu ibi ipamọ fun apẹẹrẹ akojọpọ-ẹgbẹ scrollspy. Eyi ni ibatan si nkan 3. A lọ ga ati giga. Kò ọkan lai awọn miiran, a ṣe a pact. Mo n rin lori afefe. Ẹnikan sọ pe o ti yọ tatuu rẹ kuro. Bayi Mo n ṣanfo bi labalaba. Ohun orin, Tan fit ati ki o setan, tan o soke fa awọn oniwe-gettin 'eru. Nitori ni kete ti o ba jẹ temi, ni kete ti o ba jẹ temi. O kan ni lati tan ina naa ki o jẹ ki o tan! Nitorina a lu boulevard. Ṣe o lero lailai, lero ki iwe tinrin. Mo rii gbogbo rẹ, Mo rii ni bayi.

Nkan 4

Akoonu ibi ipamọ fun apẹẹrẹ akojọpọ-ẹgbẹ scrollspy. Eyi ni ibatan si nkan 4. Ooru lẹhin ile-iwe giga nigba ti a kọkọ pade. Ko si iberu bayi, jẹ ki o lọ ki o kan ni ominira, Emi yoo nifẹ rẹ lainidi. Awọ ti o fẹnuko oorun ti o gbona pupọ a yoo yo popsicle rẹ. Ifẹ yii yoo jẹ ki o leviate.

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

Lilo

Nipasẹ awọn abuda data

Lati fi irọrun ṣafikun ihuwasi scrollspy si lilọ kiri oke rẹ, ṣafikun data-spy="scroll"si ipin ti o fẹ ṣe amí lori (julọ julọ eyi yoo jẹ <body>). Lẹhinna ṣafikun data-targetẹda pẹlu ID tabi kilasi ti ẹya obi ti .navpaati Bootstrap eyikeyi.

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>

Nipasẹ JavaScript

Lẹhin fifi kun position: relative;ninu CSS rẹ, pe scrollspy nipasẹ JavaScript:

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

Awọn ibi-afẹde ID ti o yanju nilo

Awọn ọna asopọ Navbar gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, <a href="#home">home</a>gbọdọ ṣe deede si nkan kan ninu DOM bii <div id="home"></div>.

Awọn eroja ti kii ṣe ibi- afẹde :visiblekọju

Awọn eroja ibi-afẹde ti kii ṣe :visibleni ibamu si jQuery ni yoo foju kọbikita ati pe awọn nkan nav ti o baamu wọn kii yoo ṣe afihan.

Awọn ọna

.scrollspy('refresh')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

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

.scrollspy('dispose')

Pa ohun ano ká scrollspy.

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Oruko Iru Aiyipada Apejuwe
aiṣedeede nọmba 10 Awọn piksẹli lati aiṣedeede lati oke nigbati o ṣe iṣiro ipo ti yi lọ.
ọna okun auto Wiwa apakan wo ni eroja amí wa ninu. autoyoo yan ọna ti o dara julọ lati gba awọn ipoidojuko yi lọ. offsetyoo lo ọna aiṣedeede jQuery lati gba awọn ipoidojuko yi lọ. positionyoo lo ọna ipo jQuery lati gba awọn ipoidojuko yi lọ.
afojusun okun | ohun jQuery | DOM eroja Ni pato eroja lati lo ohun itanna Scrollpy.

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
mu ṣiṣẹ.bs.scrollspy Iṣẹlẹ yi ina lori awọn yi ano nigbakugba ti a titun ohun kan di mu šišẹ nipasẹ awọn scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})