in English

Scrollspy

Värskendage automaatselt Bootstrapi navigeerimist või loendirühma komponente kerimisasendi alusel, et näidata, milline link on praegu vaateaknas aktiivne.

Kuidas see töötab

Scrollspy'l on nõuetekohaseks toimimiseks mõned nõuded:

  • Kui loote meie JavaScripti allikast, nõuabutil.js see .
  • Seda tuleb kasutada Bootstrapi navigeerimiskomponendis või loendirühmas .
  • Scrollspy nõuab position: relative;elementi, mille järgi luurate, tavaliselt <body>.
  • Kui luurate muid elemente peale <body>, veenduge, et teil oleks heightkomplekt ja overflow-y: scroll;rakendatud.
  • Ankrud ( <a>) on nõutavad ja peavad osutama sellega elemendile id.

Kui see on edukalt rakendatud, värskendatakse teie navigeerimis- või loendirühma vastavalt, teisaldades .activeklassi ühelt üksuselt teisele vastavalt nendega seotud sihtmärkidele.

Näide navigeerimisribal

Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü üksused.

@paks

Scrollspy näite kohatäite sisu. Teil on parim arhitektuur. Passi templid, ta on kosmopoliitne. Hea, värske, äge, saime selle lukku. Poleks kunagi plaaninud, et ühel päeval ma su kaotan. Ta sööb su südame välja. Sinu suudlus on kosmiline, iga liigutus on maagiline. Ma mõtlen neid, ma mõtlen, nagu ta oleks see. Tervitused, kallid, lähme teele. Lihtsalt oma öö nagu 4. juuli! Aga sa pigem lähed raisku.

@mdo

Scrollspy näite kohatäite sisu. Sest ta on muusa ja kunstnik. (Nii me teeme) Nii et sa tahad maagiaga mängida. Nii et lihtsalt ole kindel, enne kui annad selle kõik mulle. Ma kõnnin, kõnnin õhus (täna õhtul). Jäta jutt vahele, kuulsin seda kõike, aeg jalutada.

üks

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

Scrollspy näite kohatäite sisu. Kui sa tahad tantsida, kui sa tahad seda kõike, siis tead, et ma olen see tüdruk, kellele peaksid helistama. Kõnnin läbi tormi, mida ma tahaksin. Nii et las ma panen sulle sünnipäevaülikonna selga. See, kes minema pääses. Eelmise reede õhtul, jah, ma arvan, et me rikkusime seadust, ütleme alati, et me lõpetame. Sest ta on natuke Yoko ja ta on natuke "Oh ei". Ma tahan, et lõualuu langeks, silmad hüppaksid, pea pöörleks, keha põrutaks. Jah, me kasutasime krediitkaarte ja meid visati baarist välja.

Ja veel veidi kohatäite sisu.

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

Näide pesastatud naviga

Scrollspy töötab ka pesastatud .navs-ga. Kui pesastatud .navon .active, on ka selle vanemad .active. Kerige navigeerimisriba kõrval olevat ala ja vaadake aktiivse klassi muutumist.

1. punkt

Scrollspy näite kohatäite sisu. See on seotud punktiga 1. Viib teid miilide kõrgusele, nii kõrgele, sest tal on see üks rahvusvaheline naeratus. Minu voodis on võõras mees, peas kostab põksumine. Oh ei. Teises elus panen sind jääma. Sest ma olen kõigeks võimeline. Sobib minu kroonivaks lahinguks. Kasutati teie vanemate alkoholi varastamiseks ja katusele ronimiseks. Toon, päevitus ja valmis, keera see üles, sest see muutub raskeks. Tema armastus on nagu narkootikum. Ma arvan, et ma unustasin, et mul on valikuvõimalus.

Punkt 1-1

Scrollspy näite kohatäite sisu. See on seotud punktiga 1-1. Teil on parim arhitektuur. Passi templid, ta on kosmopoliitne. Hea, värske, äge, saime selle lukku. Poleks kunagi plaaninud, et ühel päeval ma su kaotan. Ta sööb su südame välja. Sinu suudlus on kosmiline, iga liigutus on maagiline. Ma mõtlen neid, ma mõtlen, nagu ta oleks see. Tervitused, kallid, lähme teele. Lihtsalt oma öö nagu 4. juuli! Aga sa pigem lähed raisku.

Punkt 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

Scrollspy näite kohatäite sisu. See on seotud punktiga 3-2. Sa oled originaal, ei saa asendada. Terve öö mängivad nad sinu laulu. California tüdrukud, me oleme vaieldamatud. Nagu lind ilma puurita. Nüüd pole hirmu, lase lahti ja ole lihtsalt vaba, ma armastan sind tingimusteta. Näen kirjutist seinal. Võite reisida mööda maailma, kuid kuldsele rannikule ei lähe midagi lähedale.

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

Näide loendirühmaga

Scrollspy töötab ka .list-groups-iga. Kerige loendirühma kõrval olevat ala ja vaadake aktiivse klassi muutumist.

1. punkt

Scrollspy loendirühma näite kohatäite sisu. See on seotud punktiga 1. Vabandust pole vaja. Nüüd pole hirmu, lase lahti ja ole lihtsalt vaba, ma armastan sind tingimusteta. Eelmine reede õhtu. Ära ole häbelik, ma võin kihla vedada, et see on ilus. Suvi pärast keskkooli, kui me esimest korda kohtusime. Sest ta on muusa ja kunstnik. Mida? Oota. Arvasin, et mina olen erand.

2. punkt

Scrollspy loendirühma näite kohatäite sisu. See on seotud punktiga 2. Jah, ta tantsib oma rütmi järgi. Oh ei. Sa oleksid võinud olla parim. Sest, kallis, sa oled ilutulestik. Võib-olla põhjus, miks kõik uksed on suletud. Avage oma süda ja laske sellel lihtsalt alata. Nii et väga šikk, jah, ta on klassika.

Punkt 3

Scrollspy loendirühma näite kohatäite sisu. See on seotud punktiga 3. Me läheme kõrgemale ja kõrgemale. Kunagi üks ilma teiseta, me sõlmisime lepingu. Ma kõnnin õhus. Keegi ütles, et sul on tätoveering eemaldatud. Nüüd vedelen nagu liblikas. Toon, päevitus ja valmis, keera see üles, sest see muutub raskeks. Sest kord oled sa minu, kord oled minu. Peate lihtsalt valguse süütama ja laskma sellel särada! Niisiis põrutasime puiesteele. Kas tunnete end kunagi nii paberõhukena. Ma näen seda kõike, ma näen seda praegu.

Punkt 4

Scrollspy loendirühma näite kohatäite sisu. See on seotud punktiga 4. Suvi pärast keskkooli, kui me esimest korda kohtusime. Nüüd pole hirmu, lase lahti ja ole lihtsalt vaba, ma armastan sind tingimusteta. Päikese käes suudlenud nahk on nii kuum, et me sulatame teie popsi. See armastus paneb sind leviteerima.

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

Kasutamine

Andmeatribuutide kaudu

Scrollspy käitumise hõlpsaks lisamiseks ülemise riba navigeerimisse lisage data-spy="scroll"element, mida soovite luurata (tavaliselt on see <body>). Seejärel lisage atribuut mis tahes Bootstrapi komponendi data-targetalgelemendi ID või klassiga ..nav

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>

JavaScripti kaudu

Pärast position: relative;CSS-i lisamist kutsuge JavaScripti kaudu scrollspy:

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

Vajalikud on lahendatavad ID sihtmärgid

Navigeerimisriba linkidel peavad olema lahendatavad ID sihtmärgid. Näiteks <a href="#home">home</a>peab vastama millelegi DOM-is nagu <div id="home"></div>.

Sihtväliseid :visibleelemente eirati

Sihtelemente, mis ei vasta :visiblejQueryle , ignoreeritakse ja neile vastavaid navigeerimisüksusi ei tõsteta kunagi esile.

meetodid

.scrollspy('refresh')

Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:

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

.scrollspy('dispose')

Hävitab elemendi scrollspy.

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset="".

Nimi Tüüp Vaikimisi Kirjeldus
nihe number 10 Pikslid nihutamiseks ülevalt kerimise asukoha arvutamisel.
meetod string auto Otsib, millises jaotises luuratud element asub. autovalib kerimiskoordinaatide hankimiseks parima meetodi. offsetkasutab kerimiskoordinaatide hankimiseks jQuery nihkemeetodit. positionkasutab kerimiskoordinaatide hankimiseks jQuery asukohameetodit.
sihtmärk string | jQuery objekt | DOM element Määrab elemendi, mida Scrollspy pistikprogrammi rakendada.

Sündmused

Sündmuse tüüp Kirjeldus
activate.bs.scrollspy See sündmus käivitub kerimiselemendil alati, kui scrollspy aktiveerib uue üksuse. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})