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.

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 Nkan 2 Nkan 3 Nkan 4

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 `:visible`kọ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. `auto`yoo yan ọna ti o dara julọ lati gba awọn ipoidojuko yi lọ. `offset`yoo lo ọna aiṣedeede jQuery lati gba awọn ipoidojuko yi lọ. `position`yoo 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...
})

Scrollspy

Bawo ni o ṣe n ṣiṣẹ

Apeere ni navbar

@sanra

@mdo

ọkan

meji

mẹta

Apeere pẹlu iteeye nav

Nkan 1

Nkan 1-1

Nkan 1-2

Nkan 2

Nkan 3

Nkan 3-1

Nkan 3-2

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

Nkan 1

Nkan 2

Nkan 3

Nkan 4

Lilo

Nipasẹ awọn abuda data

Nipasẹ JavaScript

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

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

Awọn ọna

.scrollspy('refresh')

.scrollspy('dispose')

Awọn aṣayan

Awọn iṣẹlẹ

Awọn eroja ti kii ṣe ibi- afẹde `:visible`kọju

`.scrollspy('refresh')`

`.scrollspy('dispose')`