in English

Scrollspy

Na-emelite igodo Bootstrap na-akpaghị aka ma ọ bụ depụta ihe mejupụtara otu dabere na ọnọdụ mpịakọta iji gosi njikọ dị ugbu a na ebe nlele.

Ka o si arụ ọrụ

Scrollspy nwere ihe ole na ole achọrọ iji rụọ ọrụ nke ọma:

  • Ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js .
  • A ga-eji ya na akụrụngwa Bootstrap nav ma ọ bụ otu ndepụta .
  • Scrollspy chọrọ position: relative;na mmewere ị na-enyocha, na-abụkarị <body>.
  • Mgbe ị na-enyocha ihe ndị ọzọ na-abụghị nke <body>, jide n'aka na ị nwere heightnhazi ma overflow-y: scroll;tinye ya.
  • Achọrọ arịlịka ( <a>) ma ga-arụtụ aka na mmewere na nke ahụ id.

Mgbe etinyere ya nke ọma, ụgbọ mmiri gị ma ọ bụ otu ndepụta ga-emelite otu a, na-ebugharị .activeklaasị site n'otu ihe gaa na nke ọzọ dabere na ebumnuche ha jikọtara ya.

Ọmụmaatụ na navbar

Pịgharịa mpaghara n'okpuru ebe ịnya ụgbọ mmiri wee lelee klaasị na-agbanwe agbanwe. A ga-eme ka ọ pụta ìhè nke ọma.

@abụba

Ọdịnaya njide maka ihe atụ scrollspy. Ị nwetara ụlọ ọrụ kacha mma. Stampụ paspọtụ, ọ bụ mba ụwa. Ọ dị mma, ọhụrụ, dị egwu, anyị nwetara ya na mkpọchi. Ọ dịghị mgbe zubere na otu ụbọchị m ga-atụfu gị. Ọ na-eri gị obi. Nsusu ọnụ gị bụ mbara igwe, mmegharị ọ bụla bụ anwansi. M pụtara ndị ahụ, m pụtara na ọ bụ ya. Ekele ndị m hụrụ n'anya ka anyị gaa njem. Naanị nwe abalị dịka ụbọchị anọ nke Julaị! Mana ọ ga-akara gị mma ịla n'iyi.

@mdo

Ọdịnaya njide maka ihe atụ scrollspy. N'ihi na ọ bụ ihe ngosi nka na onye na-ese ihe. (Nke a bụ otu anyị si eme) yabụ ị chọrọ iji anwansi gwuo egwu. Ya mere, jide n'aka tupu ị nye m ya niile. M na-eje ije, a na m eje ije na ikuku (n'abalị a). Mafee okwu ahụ, nụ ya niile, oge iji jee ije.

otu

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

Ọdịnaya njide maka ihe atụ scrollspy. Ọ bụrụ na ịchọrọ ịgba egwu, ọ bụrụ na ịchọrọ ya niile, ị maara na abụ m nwa agbọghọ ị ga-akpọ. Gagharịa site na oké ifufe m ga-eme. Ya mere, ka m kpọbata gị na uwe ọmụmụ ụbọchị ọmụmụ gị. Nke ahụ nke furu. N'abalị Fraịde gara aga, ee, echere m na anyị mebiri iwu, na-ekwukarị na anyị ga-akwụsị. N'ihi na ọ bụ ntakịrị Yoko, ọ bụkwa ntakịrị 'Oh mba'. Achọrọ m droppin agba', poppin anya', ntụgharị isi', shockin ahụ'. Ee, anyị ririla kaadị kredit anyị wee chụpụ anyị n'ụlọ mmanya.

Na ụfọdụ ọdịnaya ndị ọzọ na-edebe ebe, maka ezigbo nha.

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

Ọmụmaatụ nwere nav akwu

Scrollspy na-arụkwa ọrụ na akwu .navs. .navỌ bụrụ na akwụrụ .active, ndị mụrụ ya ga-abụkwa .active. Pịgharịa n'akụkụ navbar wee lelee klaasị na-agbanwe agbanwe.

Ihe 1

Ọdịnaya njide maka ihe atụ scrollspy. Nke a metụtara ihe 1. Na-ewe gị kilomita n'ịdị elu, dị elu, n'ihi na ọ nwere otu ọnụ ọchị mba ụwa. Onwere onye m mabu n’àkwà m, ihe na-akụ m n’isi. Oh, mba. Na ndụ ọzọ, m ga-eme ka ị nọrọ. N'ihi na m, enwere m ike ihe ọ bụla. Kwesịrị ekwesị maka agha okpueze m. Eji ya ezuru mmanya nne na nna gị wee rịgoro n'elu ụlọ. Ụda, tan dabara na njikere, tụgharịa ya na-eme ka ọ dị arọ. Ịhụnanya ya dị ka ọgwụ ọjọọ. Echere m na m chefuru na enwere m nhọrọ.

Ihe 1-1

Ọdịnaya njide maka ihe atụ scrollspy. Nke a metụtara ihe 1-1. Ị nwetara ụlọ ọrụ kacha mma. Stampụ paspọtụ, ọ bụ mba ụwa. Ọ dị mma, ọhụrụ, dị egwu, anyị nwetara ya na mkpọchi. Ọ dịghị mgbe zubere na otu ụbọchị m ga-atụfu gị. Ọ na-eri gị obi. Nsusu ọnụ gị bụ mbara igwe, mmegharị ọ bụla bụ anwansi. M pụtara ndị ahụ, m pụtara na ọ bụ ya. Ekele ndị m hụrụ n'anya ka anyị gaa njem. Naanị nwe abalị dịka ụbọchị anọ nke Julaị! Mana ọ ga-akara gị mma ịla n'iyi.

Ihe 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

Ọdịnaya njide maka ihe atụ scrollspy. Nke a metụtara ihe 3-2. Ị bụ onye mbụ, enweghị ike dochie ya. Abali nile ha na-egwu egwu, egwu gi. Ụmụ agbọghọ California anyị enweghị mgbagha. Dị ka nnụnụ na-enweghị ọnụ. Ụjọ anaghị adị ugbu a, hapụ onwe gị, m ga-ahụ gị n'anya n'enweghị ihe ọ bụla. Enwere m ike ịhụ ihe edere na mgbidi. Ị nwere ike ịgagharị ụwa ma ọ dịghị ihe na-abịaru nso n'ụsọ oké osimiri ọla edo.

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

Ọmụmaatụ nwere ndepụta-otu

Scrollspy na-arụkwa ọrụ na .list-groups. Pịgharịa na mpaghara n'akụkụ otu ndetu wee lelee mgbanwe klaasị nọ n'ọrụ.

Ihe 1

Ọdịnaya njide maka ihe atụ ndepụta-otu mpịakọta scrollspy. Nke a metụtara ihe 1. Achọghị mgbaghara. Ụjọ anaghị adị ugbu a, hapụ onwe gị, m ga-ahụ gị n'anya n'enweghị ihe ọ bụla. Abalị fraịde ikpeazụ. Adịla onye ihere ụdị nwoke a ga m nzọ na ọ mara mma. Summer ka anyị gachara ụlọ akwụkwọ sekọndrị mgbe mbụ anyị zutere. N'ihi na ọ bụ ihe ngosi nka na onye na-ese ihe. Kedu? Chere. Echere m na ọ bụ naanị m.

Ihe 2

Ọdịnaya njide maka ihe atụ ndepụta-otu mpịakọta scrollspy. Nke a metụtara ihe 2. Ee, ọ na-agba egwu na-akụ ya. Oh, mba. Ị nwere ike ịbụ onye kacha ukwuu. 'N'ihi na, nwa, ị bụ ọkụ ọkụ. Ma eleghị anya, ihe kpatara eji mechie ọnụ ụzọ niile. Mepee obi gị ka ọ malite. Ya mere, très chic, ee, ọ bụ kpochapụwo.

Ihe 3

Ọdịnaya njide maka ihe atụ ndepụta-otu mpịakọta scrollspy. Nke a metụtara ihe 3. Anyị na-aga elu na elu. Ọ dịghị mgbe otu na-enweghị nke ọzọ, anyị mere nkwekọrịta. Ana m eje ije na ikuku. Otu onye kwuru na ewepụrụ egbugbu gị. Ugbu a, m na-ese n'elu mmiri dị ka urukurubụba. Ụda, tan dabara na njikere, tụgharịa ya na-eme ka ọ dị arọ. N'ihi na mgbe ị bụ nke m, mgbe ị bụ nke m. Naanị ị ga-agbanye ọkụ wee hapụ ya ka ọ na-enwu! Ya mere, anyị kụrụ boulevard. Ọ na-adị gị mgbe ọ bụla, ọ dị gị ka akwụkwọ dị gịrịgịrị. Ahụrụ m ya niile, ahụla m ya ugbu a.

Ihe 4

Ọdịnaya njide maka ihe atụ ndepụta-otu mpịakọta scrollspy. Nke a metụtara ihe 4. Summer ka anyị gụsịrị akwụkwọ sekọndrị mgbe mbụ anyị zutere. Ụjọ anaghị adị ugbu a, hapụ onwe gị, m ga-ahụ gị n'anya n'enweghị ihe ọ bụla. Akpụkpọ anụ nke anwụ na-acha nke ukwuu, anyị ga-agbaze popsicle gị. Ịhụnanya a ga-eme ka ị 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>

Ojiji

Site na njirimara data

Ka ịtinye omume scrollspy ngwa ngwa na igodo topbar gị, gbakwunye data-spy="scroll"na mmewere ịchọrọ iledo (kacha nke a ga-abụ <body>). Wee tinye data-targetnjirimara na ID ma ọ bụ klas nke ihe nne na nna nke .navakụrụngwa Bootstrap ọ bụla.

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>

Site JavaScript

Ka ịgbakwunye position: relative;na CSS gị, kpọọ scrollspy site na Javascript:

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

Ebumnuche ID nwere ike idozi chọrọ

Njikọ Navbar ga-enwerịrị ebumnuche id nwere ike idozi. Dịka ọmụmaatụ, a <a href="#home">home</a>ga-ederịrị ihe na DOM dịka <div id="home"></div>.

Ihe ndị na- abụghị :visibleebumnuche leghaara anya

A ga-eleghara ihe ndị ezubere iche na-abụghị :visiblenke jQuery si dị na agaghị eme ka ihe ndị nav ha dabara adaba pụta ìhè.

Ụzọ

.scrollspy('refresh')

Mgbe ị na-eji scrollspy yana mgbakwunye ma ọ bụ wepụ ihe ndị sitere na DOM, ị ga-akpọ usoro ume ọhụrụ dị ka:

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

.scrollspy('dispose')

Na-emebi akwụkwọ mpịakọta mmewere.

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset="".

Aha Ụdị Ọdabara Nkọwa
nkwụsị nọmba 10 Pikselụ ka a ga-esi n'elu pụta mgbe ị na-agbakọ ọnọdụ mpịakọta.
usoro eriri akpaaka Chọta ngalaba nke ihe nledo dị na autoga-ahọrọ usoro kachasị mma iji nweta nhazi akwụkwọ mpịakọta. offsetga-eji usoro nkwụghachi ụgwọ jQuery iji nweta nhazi akwụkwọ mpịakọta. positionga-eji usoro ọnọdụ jQuery nweta nhazi akwụkwọ mpịakọta.
iche eriri | ihe jQuery | DOM element Na-akọwapụta mmewere iji tinye Scrollspy ngwa mgbakwunye.

Ihe omume

Ụdị mmemme Nkọwa
rụọ ọrụ.bs.scrollspy Ihe omume a na-agba ọkụ na akụkụ akwụkwọ mpịakọta mgbe ọ bụla ihe ọhụrụ na-arụ ọrụ site na scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})