in English

Scrollspy

Ùraich gu fèin-ghluasadach seòladh Bootstrap no liostaich co-phàirtean buidhne stèidhichte air suidheachadh scrollaidh gus sealltainn dè an ceangal a tha gnìomhach sa phort-seallaidh an-dràsta.

Mar a tha e ag obair

Tha grunn riatanasan aig Scrollspy gus obrachadh gu ceart:

  • Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .
  • Feumar a chleachdadh air co- phàirt Bootstrap nav no buidheann liosta .
  • Feumaidh Scrollspy position: relative;an eileamaid air a bheil thu a’ brathadh, mar as trice am faidhle <body>.
  • Nuair a bhios tu a’ brathadh air eileamaidean a bharrachd air an <body>, dèan cinnteach gu bheil heightseata agad agus cuir an overflow-y: scroll;sàs e.
  • Tha feum air acraichean ( <a>) agus feumaidh iad eileamaid a chomharrachadh le sin id.

Nuair a thèid a chuir an gnìomh gu soirbheachail, bheir do bhuidheann seòlaidh no liosta ùrachadh a rèir sin, a’ gluasad a’ .activechlas bho aon nì chun ath fhear stèidhichte air na targaidean co-cheangailte riutha.

Eisimpleir ann an navbar

Sgrolaich an raon gu h-ìosal fon bhàr-seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach. Thèid na stuthan tuiteam-sìos a chomharrachadh cuideachd.

@saill

Susbaint neach-àite airson an eisimpleir scrollspy. Fhuair thu an ailtireachd as fheàrr. Stampaichean cead-siubhail, tha i cosmopolitan. Gu math, ùr, fann, fhuair sinn air glas e. Cha robh dùil agam gum biodh mi aon latha gad chall. Bidh i ag ithe do chridhe a-mach. Tha do phòg cosmach, tha a h-uile gluasad draoidheil. Tha mi a’ ciallachadh an fheadhainn, tha mi a’ ciallachadh mar is i an tè. Beannachdan luchd-gràidh leig leinn turas a ghabhail. Dìreach sealbhaich an oidhche mar an 4mh den Iuchar! Ach b’ fheàrr leat a dhol air chall.

@meadh

Susbaint neach-àite airson an eisimpleir scrollspy. Leis gur i am muse agus an neach-ealain. (Seo mar a nì sinn) Mar sin tha thu airson cluich le draoidheachd. Mar sin dìreach dèan cinnteach mus toir thu a h-uile càil dhomh. Tha mi a’ coiseachd, tha mi a’ coiseachd air an adhar (nochd). Leum an òraid, chuala e gu lèir, ùine airson coiseachd.

aon

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

Susbaint neach-àite airson an eisimpleir scrollspy. Ma tha thu airson dannsa, ma tha thu ag iarraidh a h-uile càil, tha fios agad gur mise an nighean ris am bu chòir dhut a ghairm. A ' coiseachd tron ​​stoirm bhithinn. Mar sin leig dhomh do thoirt anns an deise co-là-breith agad. Am fear a fhuair air falbh. Oidhche Haoine sa chaidh, seadh tha mi a’ smaoineachadh gun do bhris sinn an lagh, an-còmhnaidh ag ràdh gu bheil sinn a’ dol a stad. Adhbhar gur e rud beag de Yoko a th' innte, 'S gur e rud beag de 'Oh chan eil' a th' innte. Tha mi ag iarraidh a’ ghiallan droppin’, eye poppin’, ceann a’ tionndadh’, bodhaig shockin’. Yeah, chuir sinn suas na cairtean creideis againn agus chaidh ar breabadh a-mach às a’ bhàr.

Agus beagan a bharrachd susbaint neach-àite, airson deagh thomhas.

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

Eisimpleir le neadachadh nav

Scrollspy cuideachd ag obair le neadachadh .navs. .navMa tha nead .active, bidh a phàrantan cuideachd .active. Scrollaich an raon ri taobh a’ bhàr seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach.

Nì 1

Susbaint neach-àite airson an eisimpleir scrollspy. Tha am fear seo a' buntainn ri nì 1. Tha i gad thoirt mìltean àrd, cho àrd, oir tha an aon ghàire eadar-nàiseanta sin aice. Tha coigreach na mo leabaidh, tha punnd na mo cheann. O, chan eil. Ann am beatha eile bheir mi ort fuireach. ‘Adhbhar mi, tha mi comasach air rud sam bith. Freagarrach airson mo bhlàr crùnaidh. Air a chleachdadh airson deoch-làidir do phàrantan a ghoid agus a dhìreadh chun mhullach. Tòn, tan iomchaidh agus deiseil, tionndaidh suas e ag adhbhrachadh gu bheil e trom. Tha a gaol coltach ri droga. Tha mi creidsinn gun do dhìochuimhnich mi gun robh roghainn agam.

Nì 1-1

Susbaint neach-àite airson an eisimpleir scrollspy. Tha am fear seo a’ buntainn ris an nì 1-1. Fhuair thu an ailtireachd as fheàrr. Stampaichean cead-siubhail, tha i cosmopolitan. Gu math, ùr, fann, fhuair sinn air glas e. Cha robh dùil agam gum biodh mi aon latha gad chall. Bidh i ag ithe do chridhe a-mach. Tha do phòg cosmach, tha a h-uile gluasad draoidheil. Tha mi a’ ciallachadh an fheadhainn, tha mi a’ ciallachadh mar is i an tè. Beannachdan luchd-gràidh leig leinn turas a ghabhail. Dìreach sealbhaich an oidhche mar an 4mh den Iuchar! Ach b’ fheàrr leat a dhol air chall.

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

Susbaint neach-àite airson an eisimpleir scrollspy. Tha am fear seo co-cheangailte ri nì 3-2. Tha thu tùsail, chan urrainn dhut a chur na àite. Fad na h-oidhche tha iad a 'cluich, do òran. California girls tha sinn gun àicheadh. Mar eun gun chèill. Chan eil eagal a-nis, leig air falbh agus dìreach bi saor, Bheir mi gaol dhut gun chumhachan. Chì mi an sgrìobhadh air a’ bhalla. B’ urrainn dhut an saoghal a shiubhal ach chan eil dad a’ tighinn faisg air a’ chosta òrail.

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

Eisimpleir le buidheann liosta

Scrollspy cuideachd ag obair le .list-groups. Sgrolaich an raon ri taobh a’ bhuidheann liosta agus coimhead air an atharrachadh clas gnìomhach.

Nì 1

Susbaint neach-àite airson eisimpleir buidheann liosta scrollspy. Tha am fear seo a' buntainn ri nì 1. Chan fheum leisgeulan. Chan eil eagal a-nis, leig air falbh agus dìreach bi saor, Bheir mi gaol dhut gun chumhachan. Oidhche Haoine sa chaidh. Na bi nad ghille caran diùid cuiridh mi geall gu bheil e brèagha. As t-samhradh às dèidh àrd-sgoil nuair a choinnich sinn an toiseach. Leis gur i am muse agus an neach-ealain. Dè? Fuirich. Shaoil ​​​​mi gur e eisgeachd a bh’ annam.

Nì 2

Susbaint neach-àite airson eisimpleir buidheann liosta scrollspy. Tha am fear seo a' buntainn ri nì 2. Seadh, bidh i a' dannsa ri a buille fhèin. O, chan eil. Dh'fhaodadh tu a bhith mar an tè as motha. ‘Adhbhar, pàisde, tha thu nad chleasan-teine. Is dòcha gur e adhbhar carson a tha na dorsan uile dùinte. Fosgail do chridhe agus dìreach leig leis tòiseachadh. Mar sin très chic, yeah, tha i na clasaig.

Nì 3

Susbaint neach-àite airson eisimpleir buidheann liosta scrollspy. Tha an tè seo a 'buntainn ri nì 3. Bidh sinn a 'dol nas àirde agus nas àirde. Cha robh fear às aonais an tè eile, rinn sinn aonta. Tha mi a’ coiseachd air an adhar. Thuirt cuideigin gun deach an tatù agad a thoirt air falbh. A-nis tha mi a 'seòladh mar dealan-dè. Tòn, tan iomchaidh agus deiseil, tionndaidh suas e ag adhbhrachadh gu bheil e trom. Adhbhar aon uair 's gur leamsa thu, aon uair 's gur leamsa thu. Feumaidh tu dìreach an solas a lasadh agus leigeil leis deàrrsadh! Mar sin bhuail sinn am boulevard. A bheil thu a-riamh a’ faireachdainn, a’ faireachdainn cho tana pàipear. Tha mi ga fhaicinn gu lèir, tha mi ga fhaicinn a-nis.

Nì 4

Susbaint neach-àite airson eisimpleir buidheann liosta scrollspy. Tha am fear seo a' buntainn ri nì 4. Samhradh às dèidh àrd-sgoil nuair a choinnich sinn an toiseach. Chan eil eagal a-nis, leig air falbh agus dìreach bi saor, Bheir mi gaol dhut gun chumhachan. Craiceann air a phòg leis a’ ghrian cho teth is gun leag sinn do phòg. Bheir an gaol seo ort 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>

Cleachdadh

Tro fheartan dàta

Gus giùlan scrollaidh a chuir ris an t-seòladh bàr-mullaich agad gu furasta, cuir data-spy="scroll"ris an eileamaid a tha thu airson brath a ghabhail air (mar as trice b’ e seo am faidhle <body>). An uairsin cuir am data-targetfeart leis an ID no clas na h-eileamaid phàrant de phàirt Bootstrap sam bith .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>

Air sgàth javascript

Às deidh position: relative;dhut do CSS a chuir a-steach, cuir fios chun scrollspy tro JavaScript:

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

Tha feum air targaidean ID so-rèiteach

Feumaidh targaidean id fhuasgladh a bhith aig ceanglaichean Navbar. Mar eisimpleir, <a href="#home">home</a>feumaidh rudeigin a bhith a rèir rudeigin san DOM mar <div id="home"></div>.

Cha deach aire a thoirt do eileamaidean neo :visible-targaid

Cha tèid aire a thoirt do eileamaidean targaid nach eil a :visiblerèir jQuery agus cha tèid na nithean seòlaidh co-fhreagarrach aca a chomharrachadh gu bràth.

Dòighean-obrach

.scrollspy('refresh')

Nuair a bhios tu a’ cleachdadh scrollspy an co-bhonn ri cur ris no toirt air falbh eileamaidean bhon DOM, feumaidh tu an dòigh ùrachaidh a ghairm mar seo:

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

.scrollspy('dispose')

A 'sgrios scrollspy eileamaid.

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-offset="".

Ainm Seòrsa Deònach Tuairisgeul
dheth àireamh 10 Pixels ri chothromachadh bhon mhullach nuair a thathar a’ tomhas suidheachadh an scrollaidh.
dòigh-obrach sreang fèin Lorgaidh e dè an earrann anns a bheil an eileamaid spìosrach. autotaghaidh e an dòigh as fheàrr airson co-chomharran scrollaidh fhaighinn. offsetcleachdaidh e modh ath-shuidheachadh jQuery gus co-chomharran scrollaidh fhaighinn. positioncleachdaidh e modh suidheachadh jQuery gus co-chomharran scrollaidh fhaighinn.
targaid sreang | nì jQuery | eileamaid DOM Sònraich eileamaid airson plugan Scrollspy a chuir an sàs.

Tachartasan

Seòrsa Tachartas Tuairisgeul
ghnìomhachadh.bs.scrollspy Bidh an tachartas seo a’ losgadh air an eileamaid scrollaidh nuair a thèid rud ùr a chuir an gnìomh leis an scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})