in English

Scrollspy

Sasisha kiotomatiki urambazaji wa Bootstrap au orodhesha vipengee vya kikundi kulingana na nafasi ya kusogeza ili kuonyesha ni kiungo gani kinachotumika kwa sasa kwenye poti ya kutazama.

Inavyofanya kazi

Scrollspy ina mahitaji machache ili kufanya kazi vizuri:

  • Ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitajiutil.js .
  • Ni lazima itumike kwenye kijenzi cha Bootstrap nav au kikundi cha orodha .
  • Scrollspy inahitaji position: relative;kipengee unachokipeleleza, kawaida <body>.
  • Wakati wa kupeleleza vipengele vingine isipokuwa <body>, hakikisha kuwa una heightseti na overflow-y: scroll;kutumika.
  • Nanga ( <a>) zinahitajika na lazima zielekeze kwenye kipengele kilicho na hicho id.

Inapotekelezwa kwa ufanisi, nav au kikundi chako cha orodha kitasasishwa ipasavyo, na kuhamisha .activedarasa kutoka kipengee kimoja hadi kingine kulingana na malengo yao yanayohusiana.

Mfano katika navbar

Tembeza eneo chini ya upau wa urambazaji na utazame mabadiliko ya darasa amilifu. Vipengee kunjuzi vitaangaziwa pia.

@mafuta

Maudhui ya kishika nafasi kwa mfano wa kusogeza. Umepata usanifu bora zaidi. Mihuri ya pasipoti, yeye ni wa ulimwengu wote. Safi, safi, kali, tumeiweka kwenye kufuli. Sikuwahi kupanga kuwa siku moja nitakuwa nimekupoteza. Anakula moyo wako. Busu yako ni ya ulimwengu, kila hatua ni uchawi. Ninamaanisha wale, ninamaanisha kama yeye ndiye. Salamu wapendwa tufunge safari. Imiliki tu usiku kama tarehe 4 Julai! Lakini afadhali upoteze.

@mdo

Maudhui ya kishika nafasi kwa mfano wa kusogeza. Maana yeye ndiye jumba la kumbukumbu na msanii. (Hivi ndivyo tunavyofanya) Kwa hivyo unataka kucheza na uchawi. Kwa hivyo hakikisha kabla hujanipa yote. Ninatembea, ninatembea hewani (usiku wa leo). Ruka mazungumzo, kusikia yote, wakati wa kutembea.

moja

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

Maudhui ya kishika nafasi kwa mfano wa kusogeza. Ikiwa unataka kucheza, ikiwa unataka yote, unajua kuwa mimi ndiye msichana ambaye unapaswa kumwita. Kutembea kwa njia ya dhoruba napenda. Kwa hivyo wacha nikuchukue kwenye suti yako ya kuzaliwa. Yule aliyeondoka. Ijumaa iliyopita usiku, ndio nadhani tulivunja sheria, kila mara husema tutaacha. Kwa sababu yeye ni kidogo wa Yoko, Na yeye ni kidogo ya 'Oh no'. Nataka taya droppin', eye poppin', kichwa turnin', body shockin'. Ndio, tuliongeza kadi zetu za mkopo na tukafukuzwa kwenye baa.

Na maudhui mengine zaidi ya kishika nafasi, kwa kipimo kizuri.

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

Mfano na nested nav

Scrollspy pia inafanya kazi na nested .navs. Ikiwa kiota kitawekwa .nav, .activewazazi wake pia watakuwa .active. Tembeza eneo karibu na upau wa urambazaji na utazame mabadiliko ya darasa yanayoendelea.

Kipengee cha 1

Maudhui ya kishika nafasi kwa mfano wa kusogeza. Hii inahusiana na kipengele 1. Hukupeleka maili juu, juu sana, kwa sababu ana tabasamu hilo moja la kimataifa. Kuna mgeni kitandani mwangu, kuna pigo kichwani mwangu. La, hapana. Katika maisha mengine ningekufanya ubaki. Maana mimi, nina uwezo wa chochote. Kufaa kwa vita yangu ya taji. Hutumika kuiba pombe ya wazazi wako na kupanda juu ya paa. Toni, tan inafaa na tayari, igeuze kusababisha kupata kwake kuwa nzito. Upendo wake ni kama dawa. Nadhani nilisahau nilikuwa na chaguo.

Kipengee 1-1

Maudhui ya kishika nafasi kwa mfano wa kusogeza. Hii inahusiana na kipengele 1-1. Umepata usanifu bora zaidi. Mihuri ya pasipoti, yeye ni wa ulimwengu wote. Safi, safi, kali, tumeiweka kwenye kufuli. Sikuwahi kupanga kuwa siku moja nitakuwa nimekupoteza. Anakula moyo wako. Busu yako ni ya ulimwengu, kila hatua ni uchawi. Ninamaanisha wale, ninamaanisha kama yeye ndiye. Salamu wapendwa tufunge safari. Imiliki tu usiku kama tarehe 4 Julai! Lakini afadhali upoteze.

Kipengee 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

Maudhui ya kishika nafasi kwa mfano wa kusogeza. Hii inahusiana na kipengele 3-2. Wewe ni asili, hauwezi kubadilishwa. Usiku kucha wanacheza, wimbo wako. Wasichana wa California hatuwezi kukataliwa. Kama ndege bila ngome. Hakuna woga sasa, wacha na uwe huru tu, nitakupenda bila masharti. Ninaona maandishi ukutani. Unaweza kusafiri ulimwengu lakini hakuna kitu kinachokaribia pwani ya dhahabu.

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

Mfano na kikundi cha orodha

Scrollspy pia inafanya kazi na .list-groups. Tembeza eneo karibu na kikundi cha orodha na uangalie mabadiliko ya darasa yanayoendelea.

Kipengee cha 1

Maudhui ya kishika nafasi kwa mfano wa kikundi cha orodha ya kusogeza. Hii inahusiana na kipengele 1. Usihitaji kuomba msamaha. Hakuna woga sasa, wacha na uwe huru tu, nitakupenda bila masharti. Ijumaa iliyopita usiku. Usiwe mvulana wa aibu nitaweka dau kuwa ni mzuri. Majira ya joto baada ya shule ya upili tulipokutana kwa mara ya kwanza. Maana yeye ndiye jumba la kumbukumbu na msanii. Nini? Subiri. Nilidhani kwamba mimi ndiye pekee.

Kipengee cha 2

Maudhui ya kishika nafasi kwa mfano wa kikundi cha orodha ya kusogeza. Hii inahusiana na kipengele 2. Ndiyo, anacheza kwa mpigo wake mwenyewe. La, hapana. Ungeweza kuwa mkuu zaidi. Maana, mtoto, wewe ni fataki. Labda sababu kwa nini milango yote imefungwa. Fungua moyo wako na uanze tu. Hivyo très chic, yeah, yeye ni classic.

Kipengee cha 3

Maudhui ya kishika nafasi kwa mfano wa kikundi cha orodha ya kusogeza. Hii inahusiana na kipengele 3. Tunaenda juu zaidi na zaidi. Kamwe bila mwingine, tulifanya mapatano. Ninatembea angani. Mtu fulani alisema umeondoa tattoo yako. Sasa ninaelea kama kipepeo. Toni, tan inafaa na tayari, igeuze kusababisha kupata kwake kuwa nzito. Maana mara wewe ni wangu, mara wewe ni wangu. Lazima tu uwashe taa na iangaze! Kwa hiyo tunapiga boulevard. Je! umewahi kuhisi, kuhisi karatasi nyembamba sana. Ninaona yote, naona sasa.

Kipengee cha 4

Maudhui ya kishika nafasi kwa mfano wa kikundi cha orodha ya kusogeza. Hii inahusiana na kipengele 4. Majira ya joto baada ya shule ya upili tulipokutana mara ya kwanza. Hakuna woga sasa, wacha na uwe huru tu, nitakupenda bila masharti. Ngozi ya jua yenye joto sana tutayeyusha popsicle yako. Upendo huu utakufanya uwe lewite.

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

Matumizi

Kupitia sifa za data

Ili kuongeza kwa urahisi tabia ya kusongesha kwenye urambazaji wa upau wako wa juu, ongeza data-spy="scroll"kwenye kipengee unachotaka kupeleleza (kawaida hii itakuwa <body>). Kisha ongeza data-targetsifa na kitambulisho au darasa la kipengele kikuu cha kipengele chochote cha Bootstrap .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>

Kupitia JavaScript

Baada ya kuongeza position: relative;katika CSS yako, piga scrollspy kupitia JavaScript:

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

Vitambulisho vinavyoweza kutatuliwa vinahitajika

Viungo vya Upau wa Uelekezaji lazima viwe na malengo ya vitambulisho vinavyoweza kutatuliwa. Kwa mfano, <a href="#home">home</a>lazima ilingane na kitu kwenye DOM kama <div id="home"></div>.

:visibleVipengele visivyolengwa vimepuuzwa

Vipengele vinavyolengwa ambavyo havilingani :visiblena jQuery vitapuuzwa na vipengee vyake vya nav vinavyolingana havitaangaziwa kamwe.

Mbinu

.scrollspy('refresh')

Unapotumia scrollspy kwa kushirikiana na kuongeza au kuondoa vitu kutoka kwa DOM, utahitaji kupiga njia ya kuburudisha kama hivyo:

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

.scrollspy('dispose')

Huharibu scrollspy ya kipengele.

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-offset="".

Jina Aina Chaguomsingi Maelezo
kukabiliana nambari 10 Pikseli za kurekebisha kutoka juu wakati wa kukokotoa nafasi ya kusogeza.
njia kamba kiotomatiki Hupata sehemu ambayo kipengele cha upelelezi kiko. autoitachagua njia bora zaidi ya kupata viwianishi vya kusogeza. offsetitatumia njia ya kukabiliana na jQuery kupata kuratibu za kusogeza. positionitatumia njia ya nafasi ya jQuery kupata kuratibu za kusogeza.
lengo kamba | kitu cha jQuery | Kipengele cha DOM Inabainisha kipengele cha kutumia programu-jalizi ya Scrollspy.

Matukio

Aina ya Tukio Maelezo
amilisha.bs.scrollspy Tukio hili huwashwa kwenye kipengele cha kusogeza wakati wowote kipengee kipya kinapowezeshwa na scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})