Scrollspy
A Bootstrap navigáció vagy a csoportösszetevők listázása a görgetés pozíciója alapján automatikusan frissíti, hogy jelezze, melyik hivatkozás aktív a nézetablakban.
Hogyan működik
A Scrollspy-nek néhány követelménye van a megfelelő működéshez:
- Ha a JavaScriptet forrásból készíti, akkor ehhez
util.js. - Egy Bootstrap navigációs komponensen vagy listacsoporton kell használni .
- A Scrollspy megköveteli
position: relative;a kémkedni kívánt elemet, általában a<body>. - Ha a -tól eltérő elemek után kémkedik
<body>, ügyeljen arra, hogy legyenheightbeállítva ésoverflow-y: scroll;alkalmazva. - A horgonyok (
<a>) kötelezőek, és egy elemre kell mutatniuk azzalid.
Sikeres megvalósítás esetén a navigációs vagy listacsoport ennek megfelelően frissül, és az .activeosztályt egyik elemről a másikra helyezi át a hozzájuk tartozó célok alapján.
Példa a navigációs sávban
Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. A legördülő menüelemek is kiemelve lesznek.
@zsír
Helyőrző tartalom a scrollspy példához. Neked van a legszebb építészeted. Útlevélbélyegzők, kozmopolita. Finom, friss, heves, zárra kaptuk. Soha nem terveztem, hogy egy napon elveszítelek. Kifalja a szívedet. A csókod kozmikus, minden mozdulat varázslatos. Mármint azok, úgy értem, mintha ő lenne az. Üdvözlet szeretteink, utazzunk. Csak a saját éjszakája, mint július 4-e! De inkább veszendőbe menne.
@mdo
Helyőrző tartalom a scrollspy példához. Mert ő a múzsa és a művész. (Mi így tesszük) Tehát a varázslattal akarsz játszani. Szóval csak győződj meg róla, mielőtt mindent nekem adsz. Sétálok, levegőn járok (ma este). Hagyd ki a beszédet, mindent hallottam, ideje sétálni.
egy
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
Helyőrző tartalom a scrollspy példához. Ha táncolni akarsz, ha mindent akarsz, tudod, hogy én vagyok az a lány, akit hívnod kell. Átsétálnék a viharon, amit szeretnék. Szóval hadd vegyem fel a születésnapi öltönyébe. Az, amelyik megszökött. Múlt péntek este, igen, azt hiszem, megszegtük a törvényt, mindig azt mondják, hogy abbahagyjuk. Mert ő egy kicsit Yoko, és egy kicsit "Ó nem". Azt akarom, hogy az állkapocs leessen, a szem kipattanjon, a fej megforduljon, a test sokkoljon. Igen, kimerítettük a hitelkártyáinkat, és kirúgtunk a bárból.
És még néhány helyőrző tartalom, a jó mértékért.
<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élda beágyazott navigációra
.navA Scrollspy beágyazott s -ekkel is működik . Ha egy beágyazott , .navakkor .activea szülei is azok lesznek .active. Görgessen a navigációs sáv melletti területen, és figyelje az aktív osztály változását.
1. tétel
Helyőrző tartalom a scrollspy példához. Ez az 1. tételhez kapcsolódik. Mérföld magasra visz, olyan magasra, mert van egy nemzetközi mosolya. Egy idegen van az ágyamban, dübörög a fejemben. Óh ne. Egy másik életben arra késztetném, hogy maradj. Mert én bármire képes vagyok. Alkalmas a megkoronázó csatámra. A szülei italának ellopására és a tetőre mászására használták. Tónus, barna szabású és készen áll, emelje fel, mert elnehezül. A szerelme olyan, mint egy drog. Azt hiszem, elfelejtettem, hogy van választásom.
1-1
Helyőrző tartalom a scrollspy példához. Ez az 1-1. tételhez kapcsolódik. Neked van a legszebb építészeted. Útlevélbélyegzők, kozmopolita. Finom, friss, heves, zárra kaptuk. Soha nem terveztem, hogy egy napon elveszítelek. Kifalja a szívedet. A csókod kozmikus, minden mozdulat varázslatos. Mármint azok, úgy értem, mintha ő lenne az. Üdvözlet szeretteink, utazzunk. Csak a saját éjszakája, mint július 4-e! De inkább veszendőbe menne.
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
Helyőrző tartalom a scrollspy példához. Ez a 3-2. tételhez kapcsolódik. Eredeti vagy, nem cserélhető. Egész este a te dalodat játsszák. Kaliforniai lányok, tagadhatatlanok vagyunk. Mint egy madár kalitka nélkül. Most már nincs félelem, engedd el és légy csak szabad, feltétel nélkül szeretni foglak. Látom az írást a falon. Bejárhatod a világot, de semmi sem közelíthető meg az aranyparthoz.
<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élda listacsoporttal
A Scrollspy s-vel is működik .list-group. Görgessen a listacsoport melletti területen, és figyelje az aktív osztály változását.
1. tétel
Helyőrző tartalom a scrollspy list-group példához. Ez az 1. tételhez kapcsolódik. Nincs szüksége bocsánatkérésre. Most már nincs félelem, engedd el és légy csak szabad, feltétel nélkül szeretni foglak. Múlt péntek este. Ne légy szégyenlős srác, lefogadom, hogy gyönyörű. Nyár a középiskola után, amikor először találkoztunk. Mert ő a múzsa és a művész. Mit? Várjon. Azt hittem, én vagyok a kivétel.
2. tétel
Helyőrző tartalom a scrollspy list-group példához. Ez a 2. tételhez kapcsolódik. Igen, a saját ütemére táncol. Óh ne. Te lehettél volna a legnagyobb. 'Azért mert te Bébi egy tüzijáték vagy. Talán az oka annak, hogy az összes ajtó zárva van. Nyisd ki a szíved, és csak kezdd. Szóval nagyon elegáns, igen, ő egy klasszikus.
3. tétel
Helyőrző tartalom a scrollspy list-group példához. Ez a 3. tételhez kapcsolódik. Egyre feljebb megyünk. Soha egyik a másik nélkül, egyezséget kötöttünk. A levegőben sétálok. Valaki azt mondta, hogy eltávolították a tetoválásodat. Most úgy lebegek, mint egy pillangó. Tónus, barna szabású és készen áll, emelje fel, mert elnehezül. Mert ha egyszer az enyém vagy, egyszer az enyém. Csak fel kell gyújtania a fényt, és hagynia kell ragyogni! Szóval nekivágtunk a körútnak. Érezted-e valaha, hogy olyan papírvékonynak érzed magad? Mindent látom, most is látom.
4. tétel
Helyőrző tartalom a scrollspy list-group példához. Ez a 4. tételhez kapcsolódik. Nyár a középiskola után, amikor először találkoztunk. Most már nincs félelem, engedd el és légy csak szabad, feltétel nélkül szeretni foglak. A napsütötte bőr olyan forró, hogy megolvasztjuk a popsiját. Ez a szerelem lebegni fog.
<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>
Használat
Adatattribútumokon keresztül
A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához adja hozzá data-spy="scroll"azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a <body>). Ezután adja hozzá az attribútumot bármely Bootstrap összetevő data-targetszülőelemének azonosítójával vagy osztályával ..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>
JavaScripten keresztül
Miután hozzáadta position: relative;a CSS-t, hívja meg a scrollspy-t JavaScripten keresztül:
$('body').scrollspy({ target: '#navbar-example' })
Feloldható azonosító célok szükségesek
A navigációs sáv hivatkozásainak feloldható azonosítócélokkal kell rendelkezniük. Például egy <a href="#home">home</a>meg kell felelnie valaminek a DOM-ban, például <div id="home"></div>.
A nem :visiblecél elemek figyelmen kívül hagyva
A nem :visiblejQuery szerinti célelemek figyelmen kívül maradnak, és a hozzájuk tartozó navigációs elemek soha nem lesznek kiemelve.
Mód
.scrollspy('refresh')
Ha a scrollspy-t a DOM-elemek hozzáadásával vagy eltávolításával együtt használja, meg kell hívnia a frissítési metódust, például:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Elpusztítja egy elem scrollspy-jét.
Lehetőségek
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset="".
| Név | típus | Alapértelmezett | Leírás |
|---|---|---|---|
| beszámítás | szám | 10 | Felülről eltolandó képpontok a görgetés helyzetének kiszámításakor. |
| módszer | húr | auto | Megkeresi, hogy a kémelem melyik szakaszban van. autokiválasztja a legjobb módszert a görgetési koordináták lekéréséhez. offseta jQuery offset módszert fogja használni a görgetési koordináták lekéréséhez. positiona jQuery pozíciómódszert fogja használni a görgetési koordináták lekéréséhez. |
| cél | húr | jQuery objektum | DOM elem | Megadja az elemet a Scrollspy beépülő modul alkalmazásához. |
Események
| Esemény típus | Leírás |
|---|---|
| activate.bs.scrollspy | Ez az esemény a scroll elemen aktiválódik, amikor egy új elemet aktivál a scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})