Scrollspy

Automaticky aktualizujte navigaci Bootstrap nebo seznam součástí skupiny na základě pozice posouvání, abyste označili, který odkaz je aktuálně aktivní ve výřezu.

Jak to funguje

Scrollspy má několik požadavků, aby správně fungoval:

Pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js .
Musí být použit v komponentě Bootstrap nav nebo skupině seznamů .
Scrollspy vyžaduje position: relative;na prvku, který špehujete, obvykle <body>.
Když budete špehovat jiné prvky než <body>, ujistěte se, že máte heightsadu a overflow-y: scroll;aplikujte.
Kotvy ( <a>) jsou povinné a musí ukazovat na prvek s tím id.

Po úspěšné implementaci se vaše navigace nebo skupina seznamů odpovídajícím způsobem aktualizuje a přesune .activetřídu z jedné položky na další na základě jejich přidružených cílů.

Posouvejte oblast pod navigační lištou a sledujte, jak se aktivní třída mění. Rozbalovací položky budou také zvýrazněny.

@Tlustý

Zástupný obsah pro příklad scrollspy. Máte tu nejlepší architekturu. Razítka do pasů, ona je kosmopolitní. Dobře, svěží, divoký, máme to na zámku. Nikdy jsem neplánoval, že tě jednoho dne ztratím. Vyžírá ti srdce. Tvůj polibek je kosmický, každý pohyb je magický. Myslím ty, chci říct, jako by to byla ona. Zdravím vás, milí, vydejme se na cestu. Stačí vlastnit noc jako 4. července! Ale raději se ztratíte.

@mdo

Zástupný obsah pro příklad scrollspy. Protože ona je múza a umělkyně. (Takhle to děláme) Takže si chceš hrát s magií. Takže si buď jistý, než mi to všechno dáš. Jdu, jdu vzduchem (dnes v noci). Přeskočte řeč, slyšel jsem to všechno, čas jít na procházku.

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 pro příklad scrollspy. Jestli chceš tančit, jestli chceš všechno, víš, že já jsem ta dívka, které bys měl zavolat. Prošel bych bouří. Dovolte mi, abych vás oblékl do vašeho narozeninového obleku. Ten, který utekl. Minulý pátek večer, jo, myslím, že jsme porušili zákon, vždycky říkáme, že přestaneme. Protože je trochu Yoko a je trochu 'Ó ne'. Chci, aby spadla čelist, vyskočily oči, otočila se hlava, tělo šokovalo. Jo, vyčerpali jsme kreditní karty a vyhodili nás z baru.

A pro dobrou míru ještě nějaký 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>

Příklad s vnořenou navigací

Scrollspy funguje také s vnořenými .navs. Pokud je vnořený objekt .nav, .activejeho rodiče budou také .active. Posouvejte oblast vedle navigačního panelu a sledujte, jak se aktivní třída mění.

Položka 1

Zástupný obsah pro příklad scrollspy. Tenhle se týká položky 1. Vynese tě míle vysoko, tak vysoko, protože ona má ten jeden mezinárodní úsměv. V mé posteli je cizí člověk, v hlavě mi buší. Ach ne. V jiném životě bych tě přiměl zůstat. Protože já jsem schopný všeho. Hodí se na můj vrcholný boj. Používá se ke krádeži alkoholu vašich rodičů a vylézání na střechu. Tón, opálení fit a připraven, otoč to nahoru, protože to začíná být těžké. Její láska je jako droga. Asi jsem zapomněl, že mám na výběr.

Bod 1-1

Zástupný obsah pro příklad scrollspy. Toto se vztahuje k položce 1-1. Máte tu nejlepší architekturu. Razítka do pasů, ona je kosmopolitní. Dobře, svěží, divoký, máme to na zámku. Nikdy jsem neplánoval, že tě jednoho dne ztratím. Vyžírá ti srdce. Tvůj polibek je kosmický, každý pohyb je magický. Myslím ty, chci říct, jako by to byla ona. Zdravím vás, milí, vydejme se na cestu. Stačí vlastnit noc jako 4. července! Ale raději se ztratíte.

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 pro příklad scrollspy. Toto se vztahuje k bodu 3-2. Jste originální, nelze vás nahradit. Celou noc hrají vaši píseň. Kalifornské dívky jsme nepopiratelné. Jako pták bez klece. Teď už není žádný strach, pusť se a buď volný, budu tě bezpodmínečně milovat. Vidím nápis na zdi. Mohli byste cestovat po světě, ale zlatému pobřeží se nic nepřibližuje.

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

Příklad s list-group

Scrollspy také pracuje s .list-groups. Posouvejte oblast vedle skupiny seznamu a sledujte, jak se aktivní třída mění.

Položka 1 Položka 2 Položka 3 Položka 4

Položka 1

Obsah zástupného symbolu pro příklad skupiny scrollspy seznamu. Toto se týká bodu 1. Nepotřebuji se omlouvat. Teď už není žádný strach, pusť se a buď volný, budu tě bezpodmínečně milovat. Minulá páteční noc. Nebuď stydlivý chlap, vsadím se, že je to krásné. Léto po střední škole, když jsme se poprvé potkali. Protože ona je múza a umělkyně. Co? Počkejte. Myslel jsem, že jsem výjimka.

Položka 2

Obsah zástupného symbolu pro příklad skupiny scrollspy seznamu. Tohle se týká položky 2. Jo, tančí podle svého rytmu. Ach ne. Mohl jsi být největší. Protože, zlato, jsi ohňostroj. Možná důvod, proč jsou všechny dveře zavřené. Otevřete své srdce a nechte to začít. Tak très chic, jo, je to klasika.

Položka 3

Obsah zástupného symbolu pro příklad skupiny scrollspy seznamu. Tento se vztahuje k bodu 3. Jdeme výš a výš. Nikdy jedno bez druhého, uzavřeli jsme pakt. Chodím vzduchem. Někdo řekl, že sis nechal odstranit tetování. Teď se vznáším jako motýl. Tón, opálení fit a připraven, otoč to nahoru, protože to začíná být těžké. Protože jednou jsi můj, jednou jsi můj. Stačí zapálit světlo a nechat ho zářit! Tak jsme vyrazili do bulváru. Cítíte se někdy tak tenký jako papír? Vidím to všechno, vidím to teď.

Položka 4

Obsah zástupného symbolu pro příklad skupiny scrollspy seznamu. Toto se vztahuje k bodu 4. Léto po střední škole, kdy jsme se poprvé setkali. Teď už není žádný strach, pusť se a buď volný, budu tě bezpodmínečně milovat. Sluncem políbená kůže tak horká, že roztopíme tvůj nanuk. Tato láska vás přiměje levitovat.

<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žívání

Prostřednictvím datových atributů

Chcete-li do navigace v horní liště snadno přidat scrollspy chování, přidejte data-spy="scroll"k prvku, který chcete špehovat (nejčastěji by to byl <body>). Potom přidejte data-targetatribut s ID nebo třídou nadřazeného prvku libovolné .navkomponenty 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>

Prostřednictvím JavaScriptu

Po přidání position: relative;CSS zavolejte scrollspy přes JavaScript:

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

Jsou vyžadovány rozlišitelné ID cíle

Odkazy na navigační liště musí mít rozlišitelné cíle id. Například <a href="#home">home</a>musí odpovídat něčemu v DOM, jako je <div id="home"></div>.

Necílové `:visible`prvky jsou ignorovány

Cílové prvky, které nejsou v :visiblesouladu s jQuery , budou ignorovány a jejich odpovídající navigační položky nebudou nikdy zvýrazněny.

Metody

`.scrollspy('refresh')`

Když používáte scrollspy ve spojení s přidáváním nebo odebíráním prvků z DOM, budete muset volat metodu refresh takto:

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

`.scrollspy('dispose')`

Zničí scrollspy prvku.

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-offset="".

název	Typ	Výchozí	Popis
offset	číslo	10	Pixely k odsazení shora při výpočtu polohy posouvání.
metoda	tětiva	auto	Zjistí, ve které sekci se špionážní prvek nachází. `auto`vybere nejlepší metodu k získání souřadnic posouvání. `offset`použije metodu posunu jQuery k získání souřadnic posouvání. `position`použije metodu polohy jQuery k získání souřadnic posouvání.
cílová	řetězec \| objekt jQuery \| prvek DOM		Určuje prvek, na který se má použít plugin Scrollspy.

Události

Typ události	Popis
aktivovat.bs.scrollspy	Tato událost se spustí na prvku scroll vždy, když bude scrollspy aktivována nová položka.

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

Scrollspy

Jak to funguje

Příklad v navigační liště

@Tlustý

@mdo

jeden

two

three

Příklad s vnořenou navigací

Položka 1

Bod 1-1

Položka 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Příklad s list-group

Položka 1

Položka 2

Položka 3

Položka 4

Používání

Prostřednictvím datových atributů

Prostřednictvím JavaScriptu

Jsou vyžadovány rozlišitelné ID cíle

Necílové :visibleprvky jsou ignorovány

Metody

.scrollspy('refresh')

.scrollspy('dispose')

Možnosti

Události

Necílové `:visible`prvky jsou ignorovány

`.scrollspy('refresh')`

`.scrollspy('dispose')`