in English

Scrollspy nga

Automatiko nga i-update ti nabigasion ti Bootstrap wenno dagiti paset ti grupo ti listaan ​​a naibatay iti posision ti panag-scroll tapno mangipakita no ania a silpo ti agdama nga aktibo iti viewport.

No kasano ti panagandar dayta

Ti Scrollspy ket addaan iti sumagmamano a kasapulan tapno umiso ti panagandar:

  • No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .
  • Masapul nga usaren daytoy iti Bootstrap nav a paset wenno grupo ti listaan ​​.
  • Ti Scrollspy ket agkasapulan position: relative;iti elemento nga espiaem, kadawyan a ti <body>.
  • No ag-espia kadagiti elemento malaksid iti <body>, siguraduen nga addaan iti heightset ken overflow-y: scroll;naipakat.
  • Dagiti angkla ( <a>) ket kasapulan ken masapul nga itudoda ti maysa nga elemento nga addaan iti dayta id.

No sibaballigi a maipatungpal, ti nav wenno grupom ti listaan ​​ket ag-update a maitunos, nga iyakar ti .activeklase manipud iti maysa a banag aginggana iti sumaganad a naibatay kadagiti nainaig a puntiriada.

Pagarigan iti navbar

I-scroll ti lugar iti baba ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase. Mai-highlight met dagiti dropdown items.

@nalukmeg

Linaon ti placeholder para iti pagarigan ti scrollspy. Nagun-odmo ti kasayaatan nga arkitektura. Selyo ti pasaporte, kosmopolitan isuna. Napintas, presko, narungsot, naalami dayta iti kandado. Diak pulos plano nga addanto aldaw a mapukawka. Kanenna ti pusom a rummuar. Kosmiko ti agekmo, tunggal tignay ket mahika. Kayatko a sawen dagiti, kayatko a sawen a kasla isu ti maysa. Kablaaw ay-ayaten tayo agdaliasat tayo. Basta kukua ti rabii a kas iti maika-4 ti Hulio! Ngem kaykayatmo ti masayang.

@mdo nga

Linaon ti placeholder para iti pagarigan ti scrollspy. ‘Ta isu ti musa ken ti artist. (Kastoy ti aramidenmi) Isu a kayatmo ti agay-ayam iti mahika. Isu a siguraduenyo laeng sakbay nga itedyo amin kaniak. Magmagnaak, magmagnaak iti angin (ton rabii). Laktawan ti palawag, nangngeg amin, panawen a magna iti panagdaliasat.

maysa

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

Linaon ti placeholder para iti pagarigan ti scrollspy. If you wanna dance, no kayat mo amin, ammom nga siak ti balasang nga awagam. Magna iti bagyo a kayatko koma. Isu a bay-anyo nga isuotko ti birthday suit-yo. Daydiay nakalibas. Last Friday night, yeah kunak nga naglabsing tayo ti linteg, kanayon nga ibaga tayo nga agsardeng tayo. 'Cause isu ket bassit ti Yoko, Ket isu ket bassit ti 'Oh no'. Kayatko ti panga droppin', mata poppin', ulo turnin', bagi shockin'. Yeah, max kami ti credit cards mi ket na-kick out kami ti bar.

Ket sumagmamano pay a linaon ti placeholder, para iti nasayaat a rukod.

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

Pagarigan ti nested nav

Agtrabaho met ti Scrollspy kadagiti nested .navs. No ti maysa a nested .navket .active, dagiti nagannakna ket agbalinto met a .active. I-scroll ti lugar iti abay ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase.

Item 1

Linaon ti placeholder para iti pagarigan ti scrollspy. Daytoy ket mainaig iti aytem 1. Alaennaka a milia ti kangatona, nangato unay, 'ta adda kenkuana dayta maysa nga internasional nga isem. Adda ganggannaet iti pagiddaak, adda panagduyok iti ulok. Ay, saan. Iti sabali a biag pagtalinaedenka koma. ‘Ta siak, kabaelak ti aniaman. Maibagay iti korona a labanko. Dati a mangtakaw iti arak dagiti dadakkelmo ket sumang-at iti atep. Tono, tan fit ken nakasagana, turn it up cause its gettin' heavy. Kasla droga ti ayatna. Pattapattaek a nalipatankon nga adda pagpiliak.

Item 1-1

Linaon ti placeholder para iti pagarigan ti scrollspy. Daytoy ket mainaig iti banag 1-1. Nagun-odmo ti kasayaatan nga arkitektura. Selyo ti pasaporte, kosmopolitan isuna. Napintas, presko, narungsot, naalami dayta iti kandado. Diak pulos plano nga addanto aldaw a mapukawka. Kanenna ti pusom a rummuar. Kosmiko ti agekmo, tunggal tignay ket mahika. Kayatko a sawen dagiti, kayatko a sawen a kasla isu ti maysa. Kablaaw ay-ayaten tayo agdaliasat tayo. Basta kukua ti rabii a kas iti maika-4 ti Hulio! Ngem kaykayatmo ti masayang.

Item 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

Linaon ti placeholder para iti pagarigan ti scrollspy. Daytoy ket mainaig iti item 3-2. Orihinalka, saan a mabalin a masukatan. Iti intero a rabii nga agtokarda, ti kantam. California girls ti di mailibak. Kas iti tumatayab nga awanan iti hawla. Awan ti buteng ita, bay-am ket basta agwayawayaka, ay-ayatenka nga awan kondisionna. Makitak ti naisurat iti diding. Mabalinmo ti agdaliasat iti lubong ngem awan ti umasideg iti nabalitokan a kosta.

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

Pagarigan ti listaan-grupo

Agtrabaho met ti Scrollspy iti .list-groups. I-scroll ti lugar iti abay ti grupo ti listaan ​​ken buyaen ti aktibo a panagbalbaliw ti klase.

Item 1

Linaon ti placeholder para iti pagarigan ti scrollspy list-group. Daytoy ket mainaig iti item 1. Dimo ​​kasapulan ti panagpakawan. Awan ti buteng ita, bay-am ket basta agwayawayaka, ay-ayatenka nga awan kondisionna. Idi rabii ti Biernes. Dika agbalin a managbabain kinda guy I'll bet it's beautiful. Kalgaw kalpasan ti haiskul idi damo a nagkitakami. ‘Ta isu ti musa ken ti artist. Ania? Aguray. Impagarupna a siak ti nailaksid.

Item 2

Linaon ti placeholder para iti pagarigan ti scrollspy list-group. Daytoy ket mainaig iti item 2. Yeah, agsala iti bukodna a beat. Ay, saan. Mabalin a sika koma ti kadakkelan. ‘Ta, baby, maysaka a paputok. Mabalin a maysa a rason no apay a naserraan amin a ridaw. Luktam ti pusom ket bay-am laeng a mangrugi dayta. So très chic, yeah, maysa isuna a klasiko.

Item 3

Linaon ti placeholder para iti pagarigan ti scrollspy list-group. Daytoy ket mainaig iti item 3. Mapantayo a nangatngato ken nangatngato. Pulos a di maysa nga awan ti sabali, nagaramidkami iti tulag. Magmagnaak iti angin. Adda nagkuna a naikkatmo ti tattoo-mo. Ita, agtaytayabak a kasla kulibangbang. Tono, tan fit ken nakasagana, turn it up cause its gettin' heavy. Cause once nga kukuak, once nga kukuak. You just gotta ignite ti lawag ket bay-am nga agsilnag! Isu a nadungparmi ti boulevard. Mariknam kadi, mariknam a kasta ti kinaingpismo a papel. Makitak amin, makitak itan.

Item 4

Linaon ti placeholder para iti pagarigan ti scrollspy list-group. Daytoy ket mainaig iti item 4. Kalgaw kalpasan ti haiskul idi damo a nagkitakami. Awan ti buteng ita, bay-am ket basta agwayawayaka, ay-ayatenka nga awan kondisionna. Sun-kissed skin so hot narunaw mi ti popsicle mo. Daytoy nga ayat ti mamagbalin kenka nga ag-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>

Panagusar

Babaen kadagiti attribute ti datos

Tapno nalaka a manginayon ti kababalin ti scrollspy iti nabigasionmo iti topbar, inayonmo data-spy="scroll"ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy ket isu koma ti <body>). Kalpasanna inayon ti data-targetattribute nga addaan iti ID wenno klase ti nagannak nga elemento ti ania man a .navpaset ti 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>

Babaen ti JavaScript

Kalpasan ti pananginayon position: relative;iti CSS-mo, tawagam ti scrollspy babaen ti JavaScript:

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

Masapul dagiti masolbar a target ti ID

Dagiti silpo ti Navbar ket masapul nga addaan kadagiti masolbar nga id a puntiria. Kas pagarigan, ti a ket <a href="#home">home</a>masapul a maitunos iti maysa a banag iti DOM a kas ti <div id="home"></div>.

Dagiti saan :visiblea target nga elemento ket saan a naikankano

Dagiti puntiria nga elemento a saan a :visiblesegun ti jQuery ket mailaksid ken dagiti maitunos a nav a banagda ket saan a pulos a mai-highlight.

Dagiti Pamay-an

.scrollspy('refresh')

No agus-usar ti scrollspy a maikuyog ti pananginayon wenno panangikkat kadagiti elemento manipud iti DOM, kasapulam nga awagan ti pamay-an ti panagpabaro a kas iti kasta:

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

.scrollspy('dispose')

Dadaelenna ti scrollspy ti maysa nga elemento.

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset="".

Nagan Tipo Default Panangiladawan
offset nga bilang 10 nga Pixels nga offset manipud iti ngato no kalkularen ti posision ti scroll.
wagas kuerdas auto nga Sapulen no ania a benneg ti ayan ti naespia nga elemento.. autoket mangpili ti kasayaatan a pamay-an tapno makaala kadagiti koordinado ti panag-scroll. offsetusarento ti jQuery offset a pamay-an tapno makaala kadagiti koordinado ti panag-scroll. positionusarento ti pamay-an ti posision ti jQuery tapno makaala kadagiti koordinado ti panag-scroll.
gandat kuerdas nga | jQuery nga banag | DOM nga elemento Ikeddeng ti elemento a mangyaplikar ti plugin ti Scrollspy.

Dagiti Pasamak

Kita ti Pasamak Panangiladawan
aktiboen ti.bs.scrollspy Daytoy a pasamak ket agputok iti elemento ti lukot tunggal ti baro a banag ket agbalin nga aktibo babaen ti scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})