in English

Scrollspy

Hloov kho Bootstrap navigation lossis sau npe pawg raws li txoj haujlwm scroll los qhia tias qhov txuas twg tam sim no muaj nyob hauv qhov chaw saib.

Nws ua haujlwm li cas

Scrollspy muaj ob peb yam yuav tsum ua kom zoo:

  • Yog tias koj tab tom tsim peb JavaScript los ntawm qhov chaw, nws xav tauutil.js .
  • Nws yuav tsum tau siv rau ntawm Bootstrap nav tivthaiv lossis npe pawg .
  • Scrollspy xav tau position: relative;ntawm lub caij koj tab tom spying rau, feem ntau yog <body>.
  • Thaum spying ntawm cov ntsiab lus uas tsis yog lub <body>, nco ntsoov kom muaj ib heighttxheej thiab overflow-y: scroll;thov.
  • Anchors ( <a>) yuav tsum tau thiab yuav tsum taw tes rau ib lub ntsiab nrog qhov ntawd id.

Thaum ua tiav tiav, koj pawg nav lossis cov npe yuav hloov kho raws li, txav .activechav kawm los ntawm ib yam khoom mus rau tom ntej raws li lawv cov hom phiaj cuam tshuam.

Piv txwv hauv navbar

Scroll thaj tsam hauv qab ntawm navbar thiab saib qhov hloov pauv hauv chav kawm. Cov khoom poob qis yuav raug pom zoo ib yam.

@fat

Placeholder cov ntsiab lus rau cov piv txwv scrollspy. Koj tau txais qhov zoo tshaj plaws architecture. Passport stamps, nws yog cosmopolitan. Zoo, tshiab, tsiv, peb tau txais nws ntawm xauv. Tsis tau npaj tias muaj ib hnub kuv yuav plam koj. Nws noj koj lub siab tawm. Koj hnia yog cosmic, txhua qhov txav yog khawv koob. Kuv txhais tau tias, Kuv txhais tau tias zoo li nws yog tus. Nyob zoo cov phooj ywg peb mus ncig ua si. Tsuas yog muaj hmo ntuj zoo li lub Xya Hli 4! Tab sis koj xav tau nkim sij hawm.

@mdo

Placeholder cov ntsiab lus rau cov piv txwv scrollspy. 'Ua rau nws yog tus muse thiab tus kws kos duab. (Qhov no yog li cas peb ua) Yog li koj xav ua si nrog khawv koob. Yog li cia li nco ntsoov ua ntej koj muab tag nrho rau kuv. Kuv taug kev, kuv taug kev saum huab cua (hmo). Hla kev hais lus, hnov ​​tag nrho, sij hawm taug kev taug kev.

ib

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

Placeholder cov ntsiab lus rau cov piv txwv scrollspy. Yog koj xav seev cev, yog koj xav tau txhua yam, koj paub tias kuv yog tus ntxhais uas koj yuav tsum hu. Taug kev los ntawm cua daj cua dub kuv yuav. Yog li cia kuv muab koj rau hauv koj lub hnub yug. Tus uas tau ncaim lawm. Hnub Friday yav tsaus ntuj, yog kuv xav tias peb ua txhaum txoj cai, ib txwm hais tias peb yuav tsum nres. 'Ua rau nws yog me ntsis ntawm Yoko, Thiab nws yog me ntsis ntawm 'Auj tsis yog'. Kuv xav tau lub puab tsaig droppin ', qhov muag poppin', taub hau tig ', lub cev shockin'. Yog, peb maxed peb cov credit card thiab tau ncaws tawm ntawm lub bar.

Thiab qee qhov chaw muab cov ntsiab lus ntxiv, rau kev ntsuas zoo.

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

Piv txwv nrog nested nav

Scrollspy kuj ua haujlwm nrog nested .navs. Yog ib lub zes .nav, .activenws niam nws txiv kuj yuav .active. Scroll qhov chaw nyob ib sab ntawm lub navbar thiab saib qhov hloov pauv hauv chav kawm.

Yam khoom 1

Placeholder cov ntsiab lus rau cov piv txwv scrollspy. Qhov no yog hais txog cov khoom 1. Coj koj mais siab, siab heev, 'ua rau nws tau txais qhov luag nyav thoob ntiaj teb. Muaj ib tug neeg txawv ntawm kuv lub txaj, muaj pounding hauv kuv taub hau. Auj, tsis muaj. Hauv lwm lub neej kuv yuav ua rau koj nyob. 'Ua rau kuv, kuv muaj peev xwm ua tau txhua yam. Suit rau kuv lub crowning sib ntaus sib tua. Siv los nyiag koj niam koj txiv cawv thiab nce mus saum ru tsev. Tone, tan haum thiab npaj, tig nws ua rau nws hnyav hnyav. Nws txoj kev hlub zoo li tshuaj. Kuv twv tias kuv tsis nco qab kuv muaj kev xaiv.

Nqe 1-1

Placeholder cov ntsiab lus rau cov piv txwv scrollspy. Qhov no suav nrog nqe 1-1. Koj tau txais qhov zoo tshaj plaws architecture. Passport stamps, nws yog cosmopolitan. Zoo, tshiab, tsiv, peb tau txais nws ntawm xauv. Tsis tau npaj tias muaj ib hnub kuv yuav plam koj. Nws noj koj lub siab tawm. Koj hnia yog cosmic, txhua qhov txav yog khawv koob. Kuv txhais tau tias, Kuv txhais tau tias zoo li nws yog tus. Nyob zoo cov phooj ywg peb mus ncig ua si. Tsuas yog muaj hmo ntuj zoo li lub Xya Hli 4! Tab sis koj xav tau nkim sij hawm.

Nqe 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

Placeholder cov ntsiab lus rau cov piv txwv scrollspy. Qhov no muaj feem xyuam rau nqe 3-2. Koj yog tus qub, hloov tsis tau. Txhua hmo lawv tab tom ua si, koj zaj nkauj. Cov ntxhais California peb nyob nraum undeniable. Zoo li noog tsis muaj tawb. Tsis muaj kev ntshai tam sim no, cia mus thiab tsuas yog muaj kev ywj pheej, Kuv yuav hlub koj yam tsis muaj kev cia siab. Kuv tuaj yeem pom cov ntawv sau rau ntawm phab ntsa. Koj tuaj yeem mus ncig lub ntiaj teb tab sis tsis muaj dab tsi los ze rau ntawm ntug dej hiav txwv kub.

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

Piv txwv nrog cov npe-pab pawg

Scrollspy kuj ua haujlwm nrog .list-groups. Scroll qhov chaw nyob ib sab ntawm cov npe pawg thiab saib cov chav kawm hloov pauv.

Yam khoom 1

Placeholder cov ntsiab lus rau scrollspy list-group piv txwv. Qhov no hais txog yam 1. Tsis tas yuav thov txim. Tsis muaj kev ntshai tam sim no, cia mus thiab tsuas yog muaj kev ywj pheej, Kuv yuav hlub koj yam tsis muaj kev cia siab. Hnub Friday dhau los. Tsis txhob ua ib tug neeg txaj muag kuv yuav twv nws zoo nkauj. Lub caij ntuj sov tom qab tsev kawm ntawv theem siab thaum peb xub ntsib. 'Ua rau nws yog tus muse thiab tus kws kos duab. Dab tsi? Tos. Xav tias kuv yog qhov kev zam.

Yam khoom 2

Placeholder cov ntsiab lus rau scrollspy list-group piv txwv. Qhov no hais txog yam 2. Yog, nws seev cev rau nws tus kheej ntaus. Auj, tsis muaj. Koj tuaj yeem ua tau zoo tshaj plaws. 'Ua rau, me nyuam, koj yog foob pob hluav taws. Tej zaum ib qho laj thawj vim li cas txhua lub qhov rooj kaw. Qhib koj lub siab thiab cia nws pib. Yog li très chic, yog, nws yog classic.

Yam khoom 3

Placeholder cov ntsiab lus rau scrollspy list-group piv txwv. Qhov no yog hais txog cov khoom 3. Peb mus siab dua thiab siab dua. Tsis muaj leej twg tsis muaj lwm tus, peb tau ua ib qho kev sib cog lus. Kuv taug kev saum huab cua. Ib tug neeg hais tias koj tau tshem koj tattoo. Tam sim no kuv ntab zoo li npauj npaim. Tone, tan haum thiab npaj, tig nws ua rau nws hnyav hnyav. Ua ib zaug koj yog kuv, ib zaug koj yog kuv. Koj tsuas yog yuav tsum tau teeb lub teeb thiab cia nws ci! Yog li ntawd peb tsoo lub boulevard. Koj puas xav tias, xav tias daim ntawv nyias. Kuv pom tag nrho, kuv pom tam sim no.

Yam khoom 4

Placeholder cov ntsiab lus rau scrollspy list-group piv txwv. Qhov no yog hais txog nqe 4. Lub caij ntuj sov tom qab tsev kawm ntawv theem siab thaum peb thawj zaug ntsib. Tsis muaj kev ntshai tam sim no, cia mus thiab tsuas yog muaj kev ywj pheej, Kuv yuav hlub koj yam tsis muaj kev cia siab. Hnub hnia ntawm daim tawv nqaij kub heev peb mam li yaj koj cov popsicle. Txoj kev hlub no yuav ua rau koj tsis muaj zog.

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

Kev siv

Los ntawm cov ntaub ntawv attributes

Txhawm rau yooj yim ntxiv scrollspy tus cwj pwm rau koj qhov topbar navigation, ntxiv data-spy="scroll"rau lub caij koj xav soj ntsuam (feem ntau qhov no yuav yog <body>). Tom qab ntawd ntxiv tus data-targetcwj pwm nrog tus ID lossis chav kawm ntawm niam txiv lub ntsiab ntawm ib qho Bootstrap .navtivthaiv.

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>

Ntawm JavaScript

Tom qab ntxiv position: relative;hauv koj CSS, hu rau scrollspy ntawm JavaScript:

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

Resolvable ID hom phiaj xav tau

Navbar txuas yuav tsum muaj lub hom phiaj id daws tau. Piv txwv li, ib qho <a href="#home">home</a>yuav tsum sib haum rau ib yam dab tsi hauv DOM zoo li <div id="home"></div>.

Cov ntsiab lus tsis yog hom :visiblephiaj tsis quav ntsej

Lub hom phiaj cov ntsiab lus uas tsis yog :visibleraws li jQuery yuav raug tsis quav ntsej thiab lawv cov khoom siv nav yuav tsis raug qhia.

Cov txheej txheem

.scrollspy('refresh')

Thaum siv scrollspy ua ke nrog kev ntxiv lossis tshem tawm cov ntsiab lus los ntawm DOM, koj yuav tsum hu rau txoj kev hloov tshiab zoo li:

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

.scrollspy('dispose')

Destroys ib lub caij scrollspy.

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-offset="".

Lub npe Hom Default Kev piav qhia
offset tus lej 10 Pixels rau offset los ntawm sab saum toj thaum xam txoj hauj lwm ntawm scroll.
txoj kev txoj hlua auto Nrhiav cov seem twg cov ntsiab lus spied nyob hauv auto. offsetyuav siv jQuery offset txoj kev kom tau scroll coordinates. positionyuav siv jQuery txoj hauj lwm txoj kev kom tau scroll coordinates.
phiaj hlua | jQuery khoom | DOM Element Qhia meej lub caij siv Scrollspy plugin.

Cov xwm txheej

Hom xwm txheej Kev piav qhia
activate.bs.scrollspy Qhov xwm txheej no tua hluav taws rau ntawm lub caij scroll thaum twg ib yam khoom tshiab tau qhib los ntawm scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})