Scrollspy

Gadzirisa otomatiki kufamba kweBootstrap kana rondedzero yezvikamu zveboka zvichibva pachinzvimbo chemupumburu kuratidza kuti ndechipi chinongedzo chiri kushanda munzvimbo yekuona.

Zvinoshanda sei

Scrollspy ine zvishoma zvinodiwa kuti ishande nemazvo:

Kana iwe uri kuvaka yedu JavaScript kubva kunobva, inodautil.js .
Inofanirwa kushandiswa paBootstrap nav chikamu kana runyorwa boka .
Scrollspy inoda position: relative;pane chinhu chauri kuongorora, kazhinji iyo <body>.
Paunenge uchisora pane zvimwe zvisiri izvo <body>, ita shuwa kuti une heightseti uye overflow-y: scroll;inoshandiswa.
Anchors ( <a>) anodiwa uye anofanira kunongedza kune chinhu chine icho id.

Kana yaitwa zvinobudirira, yako nav kana boka rezita rinogadziridza zvinoenderana, richifambisa .activekirasi kubva pane chimwe chinhu kuenda kune chinotevera zvichienderana nezvavanovavarira.

Skrodza nzvimbo iri pazasi pebhari uye tarisa iyo inoshanda kirasi shanduko. Zvinhu zvekudonhedza zvicharatidzwa zvakare.

@mafuta

Nzvimbo yemukati yemuenzaniso weku scrollspy. Iwe une architecture yakanakisa. Zvitambi zvepasipoti, ane cosmopolitan. Zvakanaka, zvitsva, zvinotyisa, takazvivhara. Handina kumboronga kuti rimwe zuva ndinenge ndakurasikirwa newe. Anodya moyo wako. Kutsvoda kwako ndeye cosmic, mafambiro ese mashiripiti. Ndinoreva avo, ndinoreva senge ndiye. Kwaziwai vadikani ngatifambei. Ingove yako husiku senge 4 Chikunguru! Asi unotoda kurasika.

@mdo

Nzvimbo yemukati yemuenzaniso weku scrollspy. Nekuti ndiye muse uye muimbi. (Ndiwo maitiro atinoita) Saka unoda kutamba nemashiripiti. Saka iva nechokwadi usati wandipa yese. Ndiri kufamba, ndiri kufamba pamhepo (nhasi manheru). Svetuka hurukuro, wakazvinzwa zvese, nguva yekufamba.

Poshi

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

Nzvimbo yemukati yemuenzaniso weku scrollspy. Kana iwe uchida kutamba, kana uchida zvese, ziva kuti ini ndini musikana waunofanira kudana. Kufamba nemudutu ndaizoda. Saka rega ndikutore musutu yako yekuzvarwa. Uyo akatiza. Manheru eChishanu chapfuura, hongu ndinofunga takatyora mutemo, gara tichiti tichamira. 'Nekuti iye mudiki weYoko, Uye idiki re'Ah kwete'. Ini ndinoda kudonhedza shaya ', eye poppin', musoro turnin', body shockin'. Ehe, takawedzera makadhi edu echikwereti uye tikadzingwa mubhawa.

Uye zvimwe zvechibatiso chenzvimbo, kuitira chiyero chakanaka.

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

Muenzaniso une nested nav

Scrollspy inoshandawo ne nested .navs. Kana dendere .navriripo .active, vabereki varo vanenge varivo .active. Skoka nzvimbo iri padyo nebhari uye tarisa iyo inoshanda kirasi shanduko.

Chinhu 1

Nzvimbo yemukati yemuenzaniso weku scrollspy. Ichi chine chekuita nechinhu 1. Inokutora mamaira kuenda mudenga, kukwira zvakanyanya, nekuti ane nyemwerero yepasi rese. Pane mutorwa pamubhedha wangu, pane kurovera mumusoro mangu. O, kwete. Mune humwe hupenyu ndichaita kuti ugare. Nokuti ini, ndinokwanisa kuita chero chinhu. Kukodzera hondo yangu yekorona. Waishandiswa kuba doro revabereki vako uchikwira padenga. Toni, tan yakakodzera uye yakagadzirira, isimudze ikonzerese kuti inorema. Rudo rwake rwakafanana nemushonga. Ndinofungidzira kuti ndakanganwa kuti ndine sarudzo.

Chinhu 1-1

Nzvimbo yemukati yemuenzaniso weku scrollspy. Izvi zvine chekuita nechinhu 1-1. Iwe une architecture yakanakisa. Zvitambi zvepasipoti, ane cosmopolitan. Zvakanaka, zvitsva, zvinotyisa, takazvivhara. Handina kumboronga kuti rimwe zuva ndinenge ndakurasikirwa newe. Anodya moyo wako. Kutsvoda kwako ndeye cosmic, mafambiro ese mashiripiti. Ndinoreva avo, ndinoreva senge ndiye. Kwaziwai vadikani ngatifambei. Ingove yako husiku senge 4 Chikunguru! Asi unotoda kurasika.

Chinhu 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

Nzvimbo yemukati yemuenzaniso weku scrollspy. Izvi zvinoenderana nechikamu 3-2. Iwe uri wepakutanga, haugone kutsiviwa. Husiku hwese vari kutamba, rwiyo rwenyu. California vasikana isu hatirambike. Seshiri isina chizarira. Ikozvino hapana chekutya, rega ndingosununguka, ndinokuda zvisingaite. Ndiri kuona zvakanyorwa pamadziro. Unogona kufamba nenyika asi hapana chinosvika pedyo negolden coast.

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

Muenzaniso une list-group

Scrollspy inoshandawo nes .list-group. Skrodza nzvimbo iri padivi peboka rezita uye woona shanduko yekirasi inoshanda.

Chinhu 1 Chinhu 2 Chinhu 3 Chinhu 4

Chinhu 1

Nzvimbo yezvinyorwa zveiyo scrollspy list-group muenzaniso. Ichi chine chekuita nechinhu 1. Usade kukumbira ruregerero. Ikozvino hapana chekutya, rega ndingosununguka, ndinokuda zvisingaite. Manheru eChishanu chapfuura. Usanyare kinda mukomana ndinobheja kuti wakanaka. Zhizha tapedza chikoro patakatanga kusangana. Nekuti ndiye muse uye muimbi. Chii? Mira. Ndakafunga kuti ndini ndaiva ndasiya.

Chinhu 2

Nzvimbo yezvinyorwa zveiyo scrollspy list-group muenzaniso. Ichi chine chekuita nechinhu 2. Ehe, anotamba kune bhiti yake. O, kwete. Unogona kunge uri mukuru. Nokuti, mwana, uri firework. Zvichida chikonzero nei mikova yose yakavharwa. Zarura mwoyo wako uye ingoita kuti itange. Saka très chic, hongu, ari classic.

Chinhu 3

Nzvimbo yezvinyorwa zveiyo scrollspy list-group muenzaniso. Iyi inoenderana nechinhu 3. Tinoenda kumusoro nepamusoro. Hatina mumwe pasina mumwe, takaita chibvumirano. Ndiri kufamba pamhepo. Mumwe akati wabviswa tattoo. Ikozvino ndave kungoyangarara kunge shavishavi. Toni, tan yakakodzera uye yakagadzirira, isimudze ikonzerese kuti inorema. Nokuti kana wava wangu, kana wava wangu. Unongotungidza mwenje wobva wavheneka! Saka takarova boulevard. Unombonzwa here, kunzwa bepa rakatetepa kudaro. Ndinozviona zvese, ndazviona zvino.

Chinhu 4

Nzvimbo yezvinyorwa zveiyo scrollspy list-group muenzaniso. Ichi chine chekuita nechinhu 4. Zhizha tapedza chikoro patakatanga kusangana. Ikozvino hapana chekutya, rega ndingosununguka, ndinokuda zvisingaite. Ganda rakatsvodwa nezuva rinopisa kwazvo tichanyungudutsa popsicle yako. Rudo urwu runozoita kuti ureveke.

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

Usage

Via data hunhu

Kuti uwedzere nyore scrollspy maitiro kune yako topbar navigation, wedzera data-spy="scroll"kune chinhu chaunoda kunosora (kazhinji ichi chingave icho <body>). Wobva wawedzera data-targethunhu neID kana kirasi yemubereki chinhu cheBootstrap .navchikamu.

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>

Via JavaScript

Mushure mekuwedzera position: relative;muCSS yako, fonera iyo scrollspy kuburikidza neJavaScript:

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

Resolvable ID zvinangwa zvinodiwa

Navbar links dzinofanirwa kunge dziine zvinogadziriswa id zvinangwa. Semuenzaniso, <a href="#home">home</a>inofanirwa kuenderana nechimwe chinhu chiri muDOM senge <div id="home"></div>.

Zvinhu zvisina kunangwa `:visible`zvakafuratirwa

Zvinangwa zvinhu zvisingaenderane :visiblenejQuery zvicharegeredzwa uye izvo zvinoenderana nav zvinhu hazvizombofa zvakasimbiswa.

Nzira

`.scrollspy('refresh')`

Paunenge uchishandisa scrollspy pamwe nekuwedzera kana kubvisa zvinhu kubva kuDOM, iwe unozofanirwa kufonera nzira yekuzorodza senge:

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

`.scrollspy('dispose')`

Inoparadza chinhu chinonzi scrollspy.

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-offset="".

Zita	Type	Default	Tsanangudzo
offset	nhamba	10	Mapikisi ekubvisa kubva kumusoro paunenge uchiverenga nzvimbo yekupumburudza.
nzira	tambo	auto	Inotsvaga kuti ndeipi chikamu chakasora chirimo. `auto`ichasarudza nzira yakanakisa yekuwana mipumburu inorongeka. `offset`ichashandisa jQuery offset nzira yekuwana mipumburu inorongedzerwa. `position`ichashandisa jQuery chinzvimbo nzira yekuwana mipumburu inorongedzerwa.
chinangwa	tambo \| jQuery chinhu \| DOM chikamu		Inotsanangura chinhu chekushandisa Scrollspy plugin.

Zviitiko

Chiitiko Type	Tsanangudzo
activate.bs.scrollspy	Chiitiko ichi chinopisa pachinhu chemupumburu pese kana chinhu chitsva chikavhurwa neiyo scrollspy.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Zvinoshanda sei

Muenzaniso mu navbar

@mafuta

@mdo

Poshi

two

three

Muenzaniso une nested nav

Chinhu 1

Chinhu 1-1

Chinhu 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Muenzaniso une list-group

Chinhu 1

Chinhu 2

Chinhu 3

Chinhu 4

Usage

Via data hunhu

Via JavaScript

Resolvable ID zvinangwa zvinodiwa

Zvinhu zvisina kunangwa :visiblezvakafuratirwa

Nzira

.scrollspy('refresh')

.scrollspy('dispose')

Options

Zviitiko

Zvinhu zvisina kunangwa `:visible`zvakafuratirwa

`.scrollspy('refresh')`

`.scrollspy('dispose')`