in English

Scrollspy

Sinthani zokha mayendedwe a Bootstrap kapena mndandanda wamagulu amagulu kutengera malo osindikizira kuti muwonetse ulalo womwe ukugwira ntchito powonera.

Momwe zimagwirira ntchito

Scrollspy ili ndi zofunikira zingapo kuti igwire bwino ntchito:

  • Ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js .
  • Iyenera kugwiritsidwa ntchito pagawo la Bootstrap nav kapena gulu la mndandanda .
  • Scrollspy imafuna position: relative;pa chinthu chomwe mukuchizonda, nthawi zambiri <body>.
  • Mukayang'ana zinthu zina osati <body>, onetsetsani kuti heightmwakhazikitsa ndikuyika overflow-y: scroll;.
  • Nangula ( <a>) amafunikira ndipo ayenera kuloza ku chinthu chomwe chili ndi chimenecho id.

Mukagwiritsidwa ntchito bwino, gulu lanu la nav kapena mndandanda lidzasintha moyenera, ndikusuntha .activekalasi kuchokera ku chinthu chimodzi kupita ku china kutengera zomwe akufuna.

Chitsanzo mu navbar

Sungani malo omwe ali pansi pa navbar ndikuwona kusintha kwa kalasi yogwira. Zinthu zotsikira zidzawonetsedwanso.

@mafuta

Zosungira malo zachitsanzo cha scrollspy. Muli ndi zomanga zabwino kwambiri. Masitampu a pasipoti, iye ndi wapadziko lonse lapansi. Zabwino, zatsopano, zowopsa, tili nazo pa loko. Sindinakonzekere kuti tsiku lina ndidzakutayani. Iye amadya mtima wako. Kupsompsona kwanu ndikosangalatsa, kusuntha kulikonse ndi zamatsenga. Ndikutanthauza omwewo, ndikutanthauza ngati ndi ameneyo. Moni okondedwa tiyeni tiyende. Ingokhalani ndi usiku ngati 4 Julayi! Koma inu kulibwino muwonongeke.

@mdo

Zosungira malo zachitsanzo cha scrollspy. Chifukwa iye ndiye nyumba yosungiramo zinthu zakale komanso wojambula. (Umu ndi momwe timachitira) Ndiye mukufuna kusewera ndi matsenga. Ndiye ingotsimikizani musanandipatse zonse. Ndikuyenda, ndikuyenda pamlengalenga (usiku uno). Dumphani nkhani, mwamva zonse, nthawi yoyenda.

imodzi

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

Zosungira malo zachitsanzo cha scrollspy. Ngati mukufuna kuvina, ngati mukufuna zonse, mukudziwa kuti ndine mtsikana yemwe muyenera kumutcha. Kudutsa mkuntho ine ndikanatero. Ndiye ndiloleni ndikupezereni suti yanu yobadwa. Chomwe chidathawa. Lachisanu lapitali usiku, inde ndikuganiza kuti taphwanya lamulo, nthawi zonse timanena kuti tisiya. Chifukwa ndi Yoko pang'ono, Ndipo ndi pang'ono 'O ayi'. Ndikufuna droppin ya nsagwada ', eye poppin', mutu turnin', body shockin'. Eya, tidakulitsa makhadi athu angongole ndikuthamangitsidwa mu bar.

Ndipo zina zambiri zosungira malo, kuti zikhale zabwino.

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

Chitsanzo ndi nested nav

Scrollspy imagwiranso ntchito ndi nested .navs. Ngati chisa .navchili .active, makolo akenso adzakhala .active. Mpukutu pafupi ndi navbar ndikuwona kusintha kwa kalasi yogwira.

Chinthu 1

Zosungira malo zachitsanzo cha scrollspy. Izi zikugwirizana ndi chinthu choyamba. Zimakutengerani inu mtunda wautali kwambiri, chifukwa iye ali ndi kumwetulira kumodzi kwapadziko lonse. Pali mlendo pabedi langa, pali kugunda m'mutu mwanga. O, ayi. M'moyo wina ndikadakupanga kukhala. Chifukwa ine, ndine wokhoza chirichonse. Kukonzekera nkhondo yanga ya korona. Ankaba mowa wa makolo ako ndi kukwera padenga. Kamvekedwe, koyera kokwanira komanso kokonzeka, sinthani chifukwa cholemetsa. Chikondi chake chili ngati mankhwala. Ndikuganiza kuti ndinayiwala kuti ndinali ndi chisankho.

Chithunzi 1-1

Zosungira malo zachitsanzo cha scrollspy. Izi zikugwirizana ndi chinthu 1-1. Muli ndi zomanga zabwino kwambiri. Masitampu a pasipoti, iye ndi wapadziko lonse lapansi. Zabwino, zatsopano, zowopsa, tili nazo pa loko. Sindinakonzekere kuti tsiku lina ndidzakutayani. Iye amadya mtima wako. Kupsompsona kwanu ndikosangalatsa, kusuntha kulikonse ndi zamatsenga. Ndikutanthauza omwewo, ndikutanthauza ngati ndi ameneyo. Moni okondedwa tiyeni tiyende. Ingokhalani ndi usiku ngati 4 Julayi! Koma inu kulibwino muwonongeke.

Chithunzi 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

Zosungira malo zachitsanzo cha scrollspy. Izi zikugwirizana ndi mfundo 3-2. Ndinu enieni, simungathe kusinthidwa. Usiku wonse iwo akusewera, nyimbo yanu. Atsikana aku California ndife osatsutsika. Monga mbalame yopanda khola. Palibe mantha tsopano, lolani ndikhale omasuka, ndidzakukondani mopanda malire. Ndikutha kuwona zolembedwa pakhoma. Mutha kuyenda padziko lonse lapansi koma palibe chomwe chimayandikira gombe la golidi.

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

Chitsanzo ndi mndandanda-gulu

Scrollspy imagwiranso ntchito ndi .list-groups. Mpukutu m'dera pafupi ndi mndandanda gulu ndi kuona yogwira kusintha kalasi.

Chinthu 1

Zosungira malo za chitsanzo cha gulu la scrollspy. Izi zikugwirizana ndi chinthu 1. Osafuna kupepesa. Palibe mantha tsopano, lolani ndikhale omasuka, ndidzakukondani mopanda malire. Usiku wa Lachisanu lapita. Usakhale wamanyazi ngati mnyamata ine ndikubetchera kuti ndi wokongola. Chilimwe titamaliza kusekondale titakumana koyamba. Chifukwa iye ndiye nyumba yosungiramo zinthu zakale komanso wojambula. Chani? Dikirani. Ndinaganiza kuti ndine wosiyana.

Chinthu 2

Zosungira malo za chitsanzo cha gulu la scrollspy. Ichi chikukhudzana ndi chinthu 2. Eya, amavina kugunda kwake. O, ayi. Inu mukanakhoza kukhala wamkulu kwambiri. Chifukwa, mwana, ndiwe wowombera moto. Mwina chifukwa chake zitseko zonse zatsekedwa. Tsegulani mtima wanu ndipo ingololani kuti ziyambe. Kotero très chic, eya, iye ndi wapamwamba kwambiri.

Chinthu 3

Zosungira malo za chitsanzo cha gulu la scrollspy. Ichi chikugwirizana ndi chinthu 3. Timapita pamwamba ndi pamwamba. Osati mmodzi popanda mzake, tinapanga mgwirizano. Ndikuyenda pamlengalenga. Winawake akuti mwachotsa tattoo yanu. Tsopano ndikuyandama ngati gulugufe. Kamvekedwe, koyera kokwanira komanso kokonzeka, sinthani chifukwa cholemetsa. Chifukwa ukakhala wanga, ukakhala wanga. Muyenera kuyatsa kuwala ndikuwala! Kotero ife tinagunda boulevard. Kodi inu mumamverera konse, kumva pepala kuwonda kwambiri. Ndikuwona zonse, ndikuziwona tsopano.

Chinthu 4

Zosungira malo za chitsanzo cha gulu la scrollspy. Izi zikugwirizana ndi chinthu 4. Chilimwe titamaliza sukulu ya sekondale pamene tinakumana koyamba. Palibe mantha tsopano, lolani ndikhale omasuka, ndidzakukondani mopanda malire. Khungu lopsopsona dzuwa likutentha kwambiri tidzasungunula popsicle yanu. Chikondi ichi chidzakupangitsani inu kukhala Levite.

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

Kugwiritsa ntchito

Kudzera muzochita za data

Kuti muwonjezere machitidwe a scrollspy pakuyenda kwanu kwapamwamba, onjezani data-spy="scroll"ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri izi zitha kukhala <body>). Kenako onjezani mawonekedwewo data-targetndi ID kapena kalasi ya kholo la gawo lililonse la 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>

Kudzera pa JavaScript

Mukawonjezera position: relative;mu CSS yanu, imbani scrollspy kudzera pa JavaScript:

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

Zolinga za ID zothetsedwa ndizofunikira

Maulalo a Navbar akuyenera kukhala ndi ma id omwe angathetsedwe. Mwachitsanzo, <a href="#home">home</a>ziyenera kugwirizana ndi china chake mu DOM monga <div id="home"></div>.

Zinthu zomwe sizinali :visiblechandamale sizinanyalanyazidwe

Zolinga zomwe sizikugwirizana :visiblendi jQuery sizidzanyalanyazidwa ndipo zomwe zikugwirizana nazo sizidzawonetsedwa konse.

Njira

.scrollspy('refresh')

Mukamagwiritsa ntchito scrollspy molumikizana ndi kuwonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa motere:

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

.scrollspy('dispose')

Imawononga scrollspy ya chinthu.

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-offset="".

Dzina Mtundu Zosasintha Kufotokozera
kuchepetsa nambala 10 Ma pixel oti muyike kuchokera pamwamba powerengera malo osindikizira.
njira chingwe auto Ipeza gawo lomwe spied ilimo. autoidzasankha njira yabwino yopezera ma coordinates a mipukutu. offsetadzagwiritsa ntchito jQuery offset njira kuti apeze ma scroll coordinates. positionadzagwiritsa ntchito njira ya jQuery kuti apeze ma scroll coordinates.
chandamale chingwe | jQuery chinthu | Chithunzi cha DOM Imatchula chinthu choti mugwiritse ntchito pulogalamu yowonjezera ya Scrollspy.

Zochitika

Mtundu wa Chochitika Kufotokozera
activate.bs.scrollspy Chochitikachi chimayaka pamipukutu nthawi iliyonse chinthu chatsopano chikatsegulidwa ndi scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})