in English

Scrollspy

Automaticky aktualizujte navigáciu Bootstrap alebo zoznam komponentov skupiny na základe pozície posúvania, aby ste označili, ktoré prepojenie je momentálne aktívne vo výreze.

Ako to funguje

Scrollspy má niekoľko požiadaviek, aby správne fungoval:

  • Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js .
  • Musí sa použiť na komponente Bootstrap nav alebo skupine zoznamov .
  • Scrollspy vyžaduje position: relative;na prvku, ktorý špehujete, zvyčajne <body>.
  • Pri špehovaní iných prvkov ako je <body>, uistite sa, že máte heightsadu a overflow-y: scroll;aplikujte.
  • Kotvy ( <a>) sú povinné a musia ukazovať na prvok s tým id.

Po úspešnej implementácii sa vaša navigačná skupina alebo skupina zoznamov zodpovedajúcim spôsobom aktualizuje a presunie .activetriedu z jednej položky na ďalšiu na základe ich priradených cieľov.

Príklad v navigačnej lište

Prejdite oblasťou pod navigačnou lištou a sledujte zmenu aktívnej triedy. Rozbaľovacie položky budú tiež zvýraznené.

@tuk

Zástupný obsah pre príklad scrollspy. Máte najlepšiu architektúru. Pečiatky do pasov, ona je kozmopolitná. Pekné, čerstvé, zúrivé, máme to na zámku. Nikdy som neplánoval, že jedného dňa ťa stratím. Zožiera ti srdce. Váš bozk je kozmický, každý pohyb je magický. Myslím tie, chcem povedať, ako keby to bola ona. Zdravím vás milovaní, poďme na cestu. Stačí vlastniť noc ako 4. júla! Ale radšej sa zmárniš.

@mdo

Zástupný obsah pre príklad scrollspy. Pretože ona je múza a umelkyňa. (Takto to robíme) Takže sa chceš hrať s mágiou. Takže si buď istý, kým mi to všetko dáte. Kráčam, kráčam vzduchom (dnes večer). Preskočte reč, počul som to všetko, je čas prejsť sa.

jeden

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

Zástupný obsah pre príklad scrollspy. Ak chceš tancovať, ak chceš všetko, vieš, že ja som dievča, ktorému by si mal zavolať. Prechádzal by som sa búrkou. Dovoľte mi, aby som vás obliekol do vášho narodeninového obleku. Ten, ktorý ušiel. Minulý piatok večer, áno, myslím, že sme porušili zákon, vždy povedzme, že prestaneme. Pretože je tak trochu Yoko a je tak trochu 'Ó nie'. Chcem, aby spadla čeľusť, vyskočili oči, otočila sa hlava, telo šokovalo. Áno, vyčerpali sme kreditné karty a vyhodili nás z baru.

A pre dobrú mieru ešte nejaký zástupný obsah.

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

Príklad s vnorenou navig

Scrollspy funguje aj s vnorenými .navs. .navAk je vnorený .active, jeho rodičia budú tiež .active. Prejdite oblasťou vedľa navigačného panela a sledujte, ako sa aktívna trieda mení.

Položka 1

Zástupný obsah pre príklad scrollspy. Toto sa týka bodu 1. Vezme vás míle vysoko, tak vysoko, pretože ona má taký medzinárodný úsmev. V mojej posteli je cudzinec, v hlave mi búcha. Ale nie. V inom živote by som ťa prinútil zostať. Pretože ja som schopný všetkého. Hodí sa na môj vrcholný boj. Používa sa na ukradnutie alkoholu vašich rodičov a vyšplhanie na strechu. Tón, opálenie fit a pripravené, zvýšte to, pretože je ťažké. Jej láska je ako droga. Asi som zabudol, že mám na výber.

Položka 1-1

Zástupný obsah pre príklad scrollspy. Toto sa týka položky 1-1. Máte najlepšiu architektúru. Pečiatky do pasov, ona je kozmopolitná. Pekné, čerstvé, zúrivé, máme to na zámku. Nikdy som neplánoval, že jedného dňa ťa stratím. Zožiera ti srdce. Váš bozk je kozmický, každý pohyb je magický. Myslím tie, chcem povedať, ako keby to bola ona. Zdravím vás milovaní, poďme na cestu. Stačí vlastniť noc ako 4. júla! Ale radšej sa zmárniš.

Položka 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

Zástupný obsah pre príklad scrollspy. Toto sa týka položky 3-2. Si originál, nedá sa nahradiť. Celú noc hrajú tvoju pieseň. Kalifornské dievčatá sme nepopierateľné. Ako vták bez klietky. Teraz nie je žiadny strach, pustite sa a buďte slobodní, budem vás bezpodmienečne milovať. Vidím nápis na stene. Môžete cestovať po svete, ale nič sa nepribližuje zlatému pobrežiu.

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

Príklad so skupinou zoznamu

Scrollspy funguje aj so .list-groups. Prejdite oblasťou vedľa skupiny zoznamov a sledujte, ako sa aktívna trieda mení.

Položka 1

Zástupný obsah pre príklad skupiny scrollspy zoznamu. Toto sa týka bodu 1. Netreba sa ospravedlňovať. Teraz nie je žiadny strach, pustite sa a buďte slobodní, budem vás bezpodmienečne milovať. Poslednú piatkovú noc. Nebuď plachý chlap, stavím sa, že je to krásne. Leto po strednej škole, keď sme sa prvýkrát stretli. Pretože ona je múza a umelkyňa. Čo? počkaj. Myslel som si, že ja som výnimka.

Položka 2

Zástupný obsah pre príklad skupiny scrollspy zoznamu. Tento sa týka bodu 2. Áno, tancuje podľa vlastného rytmu. Ale nie. Mohol si byť najväčší. Pretože, zlato, si ohňostroj. Možno je to dôvod, prečo sú všetky dvere zatvorené. Otvor svoje srdce a nechaj to začať. Tak très chic, áno, je to klasika.

Bod 3

Zástupný obsah pre príklad skupiny scrollspy zoznamu. Toto sa týka bodu 3. Ideme vyššie a vyššie. Nikdy jedno bez druhého, uzavreli sme pakt. Kráčam po vzduchu. Niekto povedal, že si nechal odstrániť tetovanie. Teraz sa vznášam ako motýľ. Tón, opálenie fit a pripravené, zvýšte to, pretože je ťažké. Pretože raz si môj, raz si môj. Musíte len zapáliť svetlo a nechať ho svietiť! Tak sme trafili do bulváru. Cítite sa niekedy tak tenký ako papier? Vidím to všetko, vidím to teraz.

Bod 4

Zástupný obsah pre príklad skupiny scrollspy zoznamu. Toto sa týka bodu 4. Leto po strednej škole, keď sme sa prvýkrát stretli. Teraz nie je žiadny strach, pustite sa a buďte slobodní, budem vás bezpodmienečne milovať. Slnkom pobozkaná pokožka taká horúca, že ti roztopíme nanuk. Táto láska vás prinúti levitovať.

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

Použitie

Cez dátové atribúty

Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, pridajte data-spy="scroll"prvok, ktorý chcete špehovať (najčastejšie to bude <body>). Potom pridajte data-targetatribút s ID alebo triedou nadradeného prvku ľubovoľného .navkomponentu 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>

Cez JavaScript

Po pridaní position: relative;CSS zavolajte scrollspy cez JavaScript:

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

Vyžadujú sa rozlíšiteľné ciele ID

Odkazy na navigačnom paneli musia mať rozlíšiteľné ciele ID. Napríklad <a href="#home">home</a>musí zodpovedať niečomu v DOM, ako je <div id="home"></div>.

Necieľové :visibleprvky sú ignorované

Cieľové prvky, ktoré nie sú v :visiblesúlade s jQuery , budú ignorované a ich zodpovedajúce navigačné položky nebudú nikdy zvýraznené.

Metódy

.scrollspy('refresh')

Keď používate scrollspy v spojení s pridávaním alebo odstraňovaním prvkov z DOM, budete musieť zavolať metódu refresh takto:

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

.scrollspy('dispose')

Zničí scrollspy prvku.

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-, ako v data-offset="".

názov Typ Predvolené Popis
offset číslo 10 Pixely na odsadenie zhora pri výpočte polohy rolovania.
metóda reťazec auto Zistí, v ktorej sekcii sa sledovaný prvok nachádza. autovyberie najlepšiu metódu na získanie súradníc posúvania. offsetpoužije metódu posunu jQuery na získanie súradníc posúvania. positionpoužije metódu polohy jQuery na získanie súradníc posúvania.
cieľ reťazec | objekt jQuery | prvok DOM Určuje prvok, na ktorý sa má použiť doplnok Scrollspy.

Diania

Typ udalosti Popis
aktivovať.bs.scrollspy Táto udalosť sa spustí na rolovacom prvku vždy, keď bude rolovacím špiónom aktivovaná nová položka. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})