in English

Umuzingo

Mu buryo bwikora kuvugurura Bootstrap kugendana cyangwa gutondekanya amatsinda yibice ukurikije umwanya wizingo kugirango werekane umurongo urimo gukora muburyo bwo kureba.

Uburyo ikora

Scrollspy ifite ibisabwa bike kugirango ikore neza:

  • Niba wubaka JavaScript yacu kuva isoko, birasabautil.js .
  • Igomba gukoreshwa kuri Bootstrap nav ibice cyangwa urutonde rwitsinda .
  • Umuzingo usaba position: relative;kubintu urimo kuneka, mubisanzwe <body>.
  • Mugihe kuneka kubintu bitari u <body>, menya neza ko heightwashyizeho kandi ugashyirwa overflow-y: scroll;mubikorwa.
  • Inanga ( <a>) irasabwa kandi igomba kwerekana ikintu hamwe nicyo id.

Mugihe ushyizwe mubikorwa neza, nav cyangwa urutonde rwitsinda rizavugurura bikurikije, kwimura .activeicyiciro kuva mubintu bikajya mubindi ukurikije intego zabo.

Urugero muri navbar

Kuzenguruka agace kari munsi ya navbar hanyuma urebe impinduka zikora. Ibintu byamanutse bizagaragazwa kandi.

@fat

Ibibanza byumwanya wintangarugero. Wabonye ubwubatsi bwiza. Kashe ya pasiporo, ni cosmopolitan. Nibyiza, bishya, bikaze, twabonye kubifunga. Ntabwo wigeze uteganya ko umunsi umwe nzagutakaza. Yarya umutima wawe. Gusomana kwawe ni isanzure, buri rugendo ni amarozi. Ndashaka kuvuga abo, ndashaka kuvuga ko ariwe. Ndabaramukije abakunzi reka dufate urugendo. Gusa gutunga ijoro nka 4 Nyakanga! Ariko wahitamo gupfusha ubusa.

@mdo

Ibibanza byumwanya wintangarugero. 'Kuberako ari muse numuhanzi. (Nuburyo dukora) Urashaka rero gukina nubumaji. Gusa rero menya neza mbere yuko umpa byose. Ndimo kugenda, ngenda ku kirere (iri joro). Siba ikiganiro, wunvise byose, igihe cyo kugenda.

imwe

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

Ibibanza byumwanya wintangarugero. Niba ushaka kubyina, niba ubishaka byose, uzi ko ndi umukobwa ugomba guhamagara. Genda unyuze muri serwakira. Reka rero nkwinjize mu ikoti yawe y'amavuko. Uwahunze. Ku wa gatanu ushize, yego ndatekereza ko twishe amategeko, burigihe uvuga ko tuzahagarara. 'Kuberako ari akantu gato ka Yoko, Kandi ni muto' Oya oya '. Ndashaka urwasaya ', ijisho poppin', umutwe uhinduka ', umubiri uhungabana'. Yego, twakoresheje amakarita yacu y'inguzanyo maze birukanwa mu kabari.

N'ibindi bintu bimwe byahantu, kubipimo byiza.

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

Urugero hamwe na nav

Scrollspy nayo ikorana na .navs. Niba icyari .navari .active, ababyeyi bayo nabo bazaba .active. Kuzenguruka agace kegereye navbar hanyuma urebe ibikorwa bikora bihinduka.

Ingingo ya 1

Ibibanza byumwanya wintangarugero. Iyi ijyanye ningingo ya 1. Igutwara ibirometero birebire, hejuru cyane, 'kuberako afite inseko imwe mpuzamahanga. Hano hari umuntu utazi mu buriri bwanjye, hari umutwe wanjye. Yego, oya. Mu bundi buzima nagutera kuguma. 'Impamvu I, Ndashoboye ikintu cyose. Nkwiriye urugamba rwanjye. Byakoreshejwe kwiba inzoga zababyeyi bawe no kuzamuka hejuru yinzu. Ijwi, tan irakwiriye kandi iriteguye, uzindure itera gettin 'iremereye. Urukundo rwe ni nk'ibiyobyabwenge. Ndakeka ko nibagiwe ko mfite amahitamo.

Ingingo 1-1

Ibibanza byumwanya wintangarugero. Iyi ijyanye ningingo ya 1-1. Wabonye ubwubatsi bwiza. Kashe ya pasiporo, ni cosmopolitan. Nibyiza, bishya, bikaze, twabonye kubifunga. Ntabwo wigeze uteganya ko umunsi umwe nzagutakaza. Yarya umutima wawe. Gusomana kwawe ni isanzure, buri rugendo ni amarozi. Ndashaka kuvuga abo, ndashaka kuvuga ko ariwe. Ndabaramukije abakunzi reka dufate urugendo. Gusa gutunga ijoro nka 4 Nyakanga! Ariko wahitamo gupfusha ubusa.

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

Ibibanza byumwanya wintangarugero. Iyi ijyanye ningingo ya 3-2. Uri umwimerere, ntushobora gusimburwa. Ijoro ryose barimo gukina, indirimbo yawe. Abakobwa ba Californiya ntidushobora guhakana. Nka nyoni idafite akazu. Nta bwoba ubu, reka kandi ubohore gusa, nzagukunda bitagabanije. Ndashobora kubona ibyanditse kurukuta. Urashobora kuzenguruka isi ariko ntakintu kiza hafi yinyanja ya zahabu.

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

Urugero hamwe nurutonde-itsinda

Scrollspy nayo ikorana na .list-groups. Kuzenguruka agace kari kuruhande rwurutonde hanyuma urebe impinduka zikora.

Ingingo ya 1

Umwanya wibibanza bya scrollspy urutonde-itsinda ryurugero. Iyi ijyanye ningingo ya 1. Ntukeneye gusaba imbabazi. Nta bwoba ubu, reka kandi ubohore gusa, nzagukunda bitagabanije. Ku wa gatanu ushize. Ntukabe umusore wumunyamasoni nzahitamo ko ari mwiza. Impeshyi nyuma yishuri ryisumbuye mugihe twahuye bwa mbere. 'Kuberako ari muse numuhanzi. Niki? Tegereza. Natekereje ko ari njye.

Ingingo ya 2

Umwanya wibibanza bya scrollspy urutonde-itsinda ryurugero. Iyi ijyanye ningingo ya 2. Yego, arabyina wenyine. Yego, oya. Urashobora kuba mukuru. 'Bitera, mwana wanjye, uri fireworks. Ahari impamvu ituma imiryango yose ifunga. Fungura umutima wawe ureke bitangire. Très chic, yego, ni classique.

Ingingo ya 3

Umwanya wibibanza bya scrollspy urutonde-itsinda ryurugero. Iyi ijyanye ningingo ya 3. Tugenda hejuru kandi hejuru. Ntanumwe numwe udafite undi, twagiranye amasezerano. Ndimo kugenda mu kirere. Umuntu yavuze ko wakuyeho tatouage yawe. Ubu ndimo nderemba nk'ikinyugunyugu. Ijwi, tan irakwiriye kandi iriteguye, uzindure itera gettin 'iremereye. Tera iyo umaze kuba uwanjye, iyo umaze kuba uwanjye. Ugomba gutwika urumuri ukareka rukamurika! Twakubise rero inzira. Ujya wumva, wumva impapuro zoroshye. Ndabona byose, ndabibona ubu.

Ingingo ya 4

Umwanya wibibanza bya scrollspy urutonde-itsinda ryurugero. Iyi ijyanye ningingo ya 4. Impeshyi nyuma yishuri ryisumbuye mugihe twahuye bwa mbere. Nta bwoba ubu, reka kandi ubohore gusa, nzagukunda bitagabanije. Uruhu rwasomwe nizuba rushyushye cyane tuzashonga popsicle yawe. Uru rukundo ruzagutera guterura.

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

Ikoreshwa

Binyuze mu biranga amakuru

Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-spy="scroll"(mubisanzwe ibi byaba aribyo <body>). Noneho ongeraho data-targetikiranga hamwe nindangamuntu cyangwa urwego rwibintu byababyeyi .navbigize Bootstrap.

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>

Binyuze kuri JavaScript

Nyuma yo kongera position: relative;muri CSS yawe, hamagara umuzingo ukoresheje JavaScript:

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

Intego z'indangamuntu zikemurwa zisabwa

Imiyoboro ya Navbar igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>hagomba guhura nibintu muri DOM nka <div id="home"></div>.

Ibintu bitari :visibleintego birengagijwe

Intego yibintu bidahuye :visiblena jQuery izirengagizwa kandi ibintu bihuye nabyo ntibizigera bigaragara.

Uburyo

.scrollspy('refresh')

Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:

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

.scrollspy('dispose')

Gusenya ikintu cyizingo.

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-offset="".

Izina Andika Mburabuzi Ibisobanuro
offset umubare 10 Pixels kugirango uve hejuru iyo ubaze umwanya wumuzingo.
buryo umugozi imodoka Shakisha igice igice cyubutasi kirimo. autoBizahitamo uburyo bwiza bwo kubona imizingo. offsetAzakoresha uburyo bwa jQuery offset kugirango abone umuzingo uhuza. positionAzakoresha uburyo bwa jQuery uburyo bwo kubona imizingo.
intego umugozi | Ikintu cyibibazo | Ikintu cya DOM Kugaragaza ikintu cyo gukoresha plugin ya Scrollspy.

Ibyabaye

Ubwoko bwibyabaye Ibisobanuro
gukora.bs.scrollspy Ibirori birasa kumuzingo igihe cyose ikintu gishya gihinduwe na muzingo. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})