Scrollspy

Automatiškai atnaujinkite Bootstrap naršymą arba sąrašo grupės komponentus pagal slinkties padėtį, kad nurodytumėte, kuri nuoroda šiuo metu aktyvi peržiūros srityje.

Kaip tai veikia

Scrollspy turi keletą reikalavimų, kad tinkamai veiktų:

Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .
Jis turi būti naudojamas Bootstrap navigacijos komponente arba sąrašo grupėje .
Scrollspy reikalauja position: relative;elemento, kurį šnipinėjate, paprastai <body>.
Šnipinėdami kitus elementus nei <body>, būtinai turėkite heightrinkinį ir overflow-y: scroll;pritaikykite.
Inkarai ( <a>) yra būtini ir turi nurodyti elementą su tuo id.

Sėkmingai įdiegus, jūsų navigacija arba sąrašų grupė bus atitinkamai atnaujinta, perkeliant .activeklasę iš vieno elemento į kitą, atsižvelgiant į susijusius tikslus.

Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Išskleidžiamieji elementai taip pat bus paryškinti.

@riebus

Scrollspy pavyzdžio rezervuotos vietos turinys. Turite geriausią architektūrą. Paso antspaudai, ji kosmopolitė. Puikus, šviežias, nuožmus, mes jį užrakinome. Niekada neplanavau, kad vieną dieną tave prarasiu. Ji valgo tavo širdį. Tavo bučinys kosminis, kiekvienas judesys magiškas. Turiu galvoje tuos, turiu galvoje, kad ji yra ta. Sveiki, mylimieji, leiskime į kelionę. Tiesiog turėk tokią naktį kaip liepos 4 d.! Bet verčiau būni iššvaistytas.

@mdo

Scrollspy pavyzdžio rezervuotos vietos turinys. Nes ji yra mūza ir menininkė. (Taip mes darome) Taigi jūs norite žaisti su magija. Taigi prieš atiduodami viską man, įsitikinkite. Aš vaikštau, einu oru (šiąnakt). Praleiskite pokalbį, viską girdėjau, laikas pasivaikščioti.

vienas

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 pavyzdžio rezervuotos vietos turinys. Jei nori šokti, jei nori viso to, žinai, kad aš esu ta mergina, kuriai turėtum paskambinti. Norėčiau eiti per audrą. Taigi leiskite man apsivilkti jūsų gimtadienio kostiumą. Tas, kuris paspruko. Praėjusį penktadienio vakarą, taip, manau, kad mes pažeidėme įstatymą, visada sakome, kad sustosime. Nes ji yra šiek tiek Yoko, o ji yra šiek tiek „O ne“. Noriu, kad žandikaulis atšoktų, akys iššoktų, galva pasisuktų, kūnas šokiruotų. Taip, mes išnaudojome savo kreditines korteles ir buvome išvaryti iš baro.

Ir dar šiek tiek rezervuotos vietos turinio.

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

Pavyzdys su įdėtomis navigacijomis

Scrollspy taip pat veikia su įdėtomis .navs. Jei įdėtas .navyra .active, jo tėvai taip pat bus .active. Slinkite šalia naršymo juostos esančia zona ir stebėkite, kaip keičiasi aktyvi klasė.

1 punktas

Scrollspy pavyzdžio rezervuotos vietos turinys. Tai susiję su 1 punktu. Nukelia jus mylių aukštai, taip aukštai, nes ji turi tą vienintelę tarptautinę šypseną. Mano lovoje nepažįstamas žmogus, galvoje beldžiasi. O, ne. Kitame gyvenime aš priversčiau tave pasilikti. Nes aš galiu viską. Tinka mano karūnuojančiam mūšiui. Naudojamas pavogti tavo tėvų alkoholinius gėrimus ir lipti ant stogo. Tonas, įdegis ir paruoštas, padidinkite, nes jis tampa sunkus. Jos meilė yra kaip narkotikas. Manau, kad pamiršau, kad turiu pasirinkimą.

1-1 punktas

Scrollspy pavyzdžio rezervuotos vietos turinys. Tai susiję su 1-1 punktu. Turite geriausią architektūrą. Paso antspaudai, ji kosmopolitė. Puikus, šviežias, nuožmus, mes jį užrakinome. Niekada neplanavau, kad vieną dieną tave prarasiu. Ji valgo tavo širdį. Tavo bučinys kosminis, kiekvienas judesys magiškas. Turiu galvoje tuos, turiu galvoje, kad ji yra ta. Sveiki, mylimieji, leiskime į kelionę. Tiesiog turėk tokią naktį kaip liepos 4 d.! Bet verčiau būni iššvaistytas.

1-2 punktas

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 pavyzdžio rezervuotos vietos turinys. Tai susiję su 3-2 punktu. Esate originalus, negalite pakeisti. Visą naktį jie groja, tavo daina. Kalifornijos merginos, mes neginčijamos. Kaip paukštis be narvo. Dabar nėra baimės, paleisk ir tiesiog būk laisva, aš tave besąlygiškai mylėsiu. Matau užrašą ant sienos. Galite keliauti po pasaulį, bet niekas nepriartėja prie auksinės pakrantės.

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

Pavyzdys su sąrašo grupe

Scrollspy taip pat veikia su .list-groups. Slinkite šalia sąrašo grupės esančia sritimi ir stebėkite aktyvios klasės pasikeitimą.

1 punktas 2 punktas 3 punktas 4 punktas

1 punktas

Scrollspy sąrašo grupės pavyzdžio rezervuotos vietos turinys. Tai susiję su 1 punktu. Atsiprašyti nereikia. Dabar nėra baimės, paleisk ir tiesiog būk laisva, aš tave besąlygiškai mylėsiu. Praeito penktadienio naktis. Nebūk drovus vaikinas, aš lažinuosi, kad tai gražus. Vasara po vidurinės mokyklos, kai pirmą kartą susitikome. Nes ji yra mūza ir menininkė. Ką? Laukti. Maniau, kad aš esu išimtis.

2 punktas

Scrollspy sąrašo grupės pavyzdžio rezervuotos vietos turinys. Tai susiję su 2 punktu. Taip, ji šoka pagal savo ritmą. O, ne. Tu galėjai būti didžiausias. Nes, mažute, tu esi fejerverkas. Galbūt tai yra priežastis, kodėl visos durys uždarytos. Atverk savo širdį ir leiskite jam pradėti. Taigi labai prašmatni, taip, ji yra klasika.

3 punktas

Scrollspy sąrašo grupės pavyzdžio rezervuotos vietos turinys. Tai susiję su 3 punktu. Einame vis aukščiau ir aukščiau. Niekada vienas be kito, mes sudarėme paktą. Aš vaikštau oru. Kažkas pasakė, kad tau buvo pašalinta tatuiruotė. Dabar aš plūduriuoju kaip drugelis. Tonas, įdegis ir paruoštas, padidinkite, nes jis tampa sunkus. Nes kai tu esi mano, kai tu būsi mano. Jūs tiesiog turite uždegti šviesą ir leisti jai šviesti! Taigi pataikėme į bulvarą. Ar kada nors jautiesi, toks popierinis plonas. Viską matau, matau dabar.

4 punktas

Scrollspy sąrašo grupės pavyzdžio rezervuotos vietos turinys. Tai susiję su 4 punktu. Vasara po vidurinės mokyklos, kai pirmą kartą susitikome. Dabar nėra baimės, paleisk ir tiesiog būk laisva, aš tave besąlygiškai mylėsiu. Saulės nubučiuota oda taip karšta, kad ištirpdysime jūsų popsias. Ši meilė privers jus levituoti.

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

Naudojimas

Per duomenų atributus

Norėdami lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, pridėkite data-spy="scroll"elementą, kurį norite šnipinėti (dažniausiai tai būtų <body>). Tada pridėkite atributą su bet kurio Bootstrap komponento data-targetpirminio elemento ID arba klase ..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>

Per JavaScript

Pridėję position: relative;CSS, iškvieskite scrollspy naudodami „JavaScript“:

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

Reikalingi išsprendžiami ID tikslai

Naršymo juostos nuorodos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>turi atitikti kažką DOM, pvz ., <div id="home"></div>.

Nepaisomi `:visible`netiksliniai elementai

Tiksliniai elementai, neatitinkantys :visible„jQuery “, bus ignoruojami, o atitinkami navigacijos elementai niekada nebus paryškinti.

Metodai

`.scrollspy('refresh')`

Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:

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

`.scrollspy('dispose')`

Sunaikina elemento slinktį.

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset="".

vardas	Tipas	Numatytas	apibūdinimas
kompensuoti	numerį	10	Pikseliai, skirti nuo viršaus, skaičiuojant slinkties padėtį.
metodas	styga	automatinis	Suranda, kurioje sekcijoje yra žvalgomasis elementas. Parinks `auto`geriausią metodą slinkties koordinatėms gauti. `offset`slinkimo koordinatėms gauti naudos jQuery poslinkio metodą. `position`slinkimo koordinatėms gauti naudos jQuery padėties metodą.
taikinys	styga \| jQuery objektas \| DOM elementas		Nurodo elementą, kurį reikia taikyti „Scrollspy“ papildiniui.

Renginiai

Renginio tipas	apibūdinimas
activate.bs.scrollspy	Šis įvykis suaktyvinamas slinkties elemente, kai „scrollspy“ suaktyvina naują elementą.

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

Scrollspy

Kaip tai veikia

Pavyzdys naršymo juostoje

@riebus

@mdo

vienas

two

three

Pavyzdys su įdėtomis navigacijomis

1 punktas

1-1 punktas

1-2 punktas

Item 2

Item 3

Item 3-1

Item 3-2

Pavyzdys su sąrašo grupe

1 punktas

2 punktas

3 punktas

4 punktas

Naudojimas

Per duomenų atributus

Per JavaScript

Reikalingi išsprendžiami ID tikslai

Nepaisomi :visiblenetiksliniai elementai

Metodai

.scrollspy('refresh')

.scrollspy('dispose')

Galimybės

Renginiai

Nepaisomi `:visible`netiksliniai elementai

`.scrollspy('refresh')`

`.scrollspy('dispose')`