Szpieg przewijania
Automatycznie aktualizuj nawigację Bootstrap lub składniki grupy listy na podstawie pozycji przewijania, aby wskazać, które łącze jest aktualnie aktywne w rzutni.
Jak to działa
Scrollspy ma kilka wymagań, aby działać poprawnie:
- Jeśli budujesz nasz JavaScript ze źródeł, wymaga
util.js
to . - Musi być używany w komponencie Bootstrap nav lub grupie list .
- Scrollspy wymaga
position: relative;
na elemencie, który szpiegujesz, zwykle<body>
. - Podczas szpiegowania elementów innych niż
<body>
, upewnij się, że maszheight
ustawiony ioverflow-y: scroll;
zastosowany. - Kotwice (
<a>
) są wymagane i muszą wskazywać na element z tymid
.
Po pomyślnym wdrożeniu twoja nawigacja lub grupa listy zostaną odpowiednio zaktualizowane, przenosząc .active
klasę z jednego elementu do drugiego na podstawie powiązanych z nimi celów.
Przykład w pasku nawigacyjnym
Przewiń obszar poniżej paska nawigacyjnego i obserwuj aktywną zmianę klasy. Pozycje rozwijane również zostaną podświetlone.
@tłuszcz
Zawartość zastępcza dla przykładu scrollspy. Masz najlepszą architekturę. Pieczątki w paszporcie, ona jest kosmopolityczna. Dobra, świeża, zacięta, mamy to na oku. Nigdy nie planowałem, że pewnego dnia cię stracę. Ona zjada twoje serce. Twój pocałunek jest kosmiczny, każdy ruch jest magiczny. Mam na myśli tych, mam na myśli, jakby ona była tą jedyną. Pozdrawiamy bliskich ruszamy w podróż. Po prostu zawładnij nocą jak 4 lipca! Ale wolałbyś się zmarnować.
@mdo
Zawartość zastępcza dla przykładu scrollspy. Bo jest muzą i artystką. (Tak to robimy) Więc chcesz bawić się magią. Więc bądź pewien, zanim mi to wszystko oddasz. Idę, idę w powietrzu (dziś wieczorem). Pomiń rozmowę, wysłuchaj wszystkiego, czas na spacer.
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
Zawartość zastępcza dla przykładu scrollspy. Jeśli chcesz tańczyć, jeśli chcesz tego wszystkiego, wiesz, że jestem dziewczyną, do której powinieneś zadzwonić. Chciałabym przejść przez burzę. Więc pozwól, że założę ci strój urodzinowy. Ten, który uciekł. W zeszły piątek wieczorem, tak, myślę, że złamaliśmy prawo, zawsze mówimy, że przestaniemy. Bo ona jest trochę Yoko, a ona trochę „O nie”. Chcę, żeby szczęka opadła, oczy trzepotały, głowa kręciła się, ciało szokowało. Tak, przekroczyliśmy limit naszych kart kredytowych i zostaliśmy wyrzuceni z baru.
I jeszcze trochę zawartości zastępczej, na wszelki wypadek.
<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>
Przykład z zagnieżdżoną nav
Scrollspy działa również z zagnieżdżonymi .nav
s. Jeśli zagnieżdżony .nav
jest .active
, jego rodzice również będą .active
. Przewiń obszar obok paska nawigacyjnego i obserwuj aktywną zmianę klasy.
Przedmiot 1
Zawartość zastępcza dla przykładu scrollspy. Ten odnosi się do punktu 1. Zabiera cię mile wysoko, tak wysoko, bo ona ma ten jeden międzynarodowy uśmiech. W moim łóżku jest nieznajomy, łomotanie w mojej głowie. O nie. W innym życiu kazałbym ci zostać. Bo ja jestem zdolna do wszystkiego. Szykuję się do mojej koronnej bitwy. Służy do kradzieży alkoholu rodziców i wspinania się na dach. Ton, opalenizna i gotowość, podkręć, bo robi się ciężka. Jej miłość jest jak narkotyk. Chyba zapomniałam, że mam wybór.
Pozycja 1-1
Zawartość zastępcza dla przykładu scrollspy. Ten dotyczy punktu 1-1. Masz najlepszą architekturę. Pieczątki w paszporcie, ona jest kosmopolityczna. Dobra, świeża, zacięta, mamy to na oku. Nigdy nie planowałem, że pewnego dnia cię stracę. Ona zjada twoje serce. Twój pocałunek jest kosmiczny, każdy ruch jest magiczny. Mam na myśli tych, mam na myśli, jakby ona była tą jedyną. Pozdrawiamy bliskich ruszamy w podróż. Po prostu zawładnij nocą jak 4 lipca! Ale wolałbyś się zmarnować.
Pozycja 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
Zawartość zastępcza dla przykładu scrollspy. Ten dotyczy punktu 3-2. Jesteś oryginalny, nie można go zastąpić. Całą noc grają twoją piosenkę. Dziewczyny z Kalifornii jesteśmy niezaprzeczalne. Jak ptak bez klatki. Teraz nie ma strachu, odpuść i po prostu bądź wolny, będę cię kochać bezwarunkowo. Widzę napis na ścianie. Możesz podróżować po świecie, ale nic nie zbliża się do złotego wybrzeża.
<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>
Przykład z list-group
Scrollspy działa również z .list-group
s. Przewiń obszar obok grupy listy i obserwuj aktywną zmianę klasy.
Przedmiot 1
Zawartość zastępcza dla przykładu scrollspy list-group. Ten odnosi się do punktu 1. Nie potrzebuję przeprosin. Teraz nie ma strachu, odpuść i po prostu bądź wolny, będę cię kochać bezwarunkowo. Ostatnia piątkowa noc. Nie bądź nieśmiały, założę się, że jest piękny. Lato po liceum, kiedy się poznaliśmy. Bo jest muzą i artystką. Co? Czekać. Myślałem, że jestem wyjątkiem.
Pozycja 2
Zawartość zastępcza dla przykładu scrollspy list-group. Ten odnosi się do punktu 2. Tak, ona tańczy do własnego rytmu. O nie. Mogłeś być najlepszy. Bo kochanie, jesteś fajerwerkiem. Może powód, dla którego wszystkie drzwi są zamknięte. Otwórz swoje serce i po prostu pozwól mu się zacząć. Więc très chic, tak, to klasyka.
Pozycja 3
Zawartość zastępcza dla przykładu scrollspy list-group. Ten odnosi się do punktu 3. Idziemy coraz wyżej. Nigdy jedno bez drugiego, zawarliśmy pakt. Chodzę w powietrzu. Ktoś powiedział, że usunięto ci tatuaż. Teraz, unoszę się jak motyl. Ton, opalenizna i gotowość, podkręć, bo robi się ciężka. Bo raz jesteś moja, raz jesteś moja. Musisz tylko zapalić światło i pozwolić mu świecić! Więc jedziemy na bulwar. Czy kiedykolwiek czułeś, czułeś się tak cienki jak papier. Widzę to wszystko, widzę to teraz.
Pozycja 4
Zawartość zastępcza dla przykładu scrollspy list-group. Ten odnosi się do punktu 4. Lato po liceum, kiedy po raz pierwszy się spotkaliśmy. Teraz nie ma strachu, odpuść i po prostu bądź wolny, będę cię kochać bezwarunkowo. Skóra muśnięta słońcem, tak gorąca, że stopimy twoje lody. Ta miłość sprawi, że będziesz lewitować.
<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>
Stosowanie
Poprzez atrybuty danych
Aby łatwo dodać zachowanie scrollspy do nawigacji w górnym pasku, dodaj data-spy="scroll"
element, który chcesz szpiegować (najczęściej jest to <body>
). Następnie dodaj data-target
atrybut z identyfikatorem lub klasą elementu nadrzędnego dowolnego .nav
komponentu 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>
Przez JavaScript
Po dodaniu position: relative;
kodu CSS wywołaj scrollspy przez JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
Wymagane identyfikowalne cele identyfikacyjne
Linki paska nawigacyjnego muszą mieć rozpoznawalne cele id. Na przykład <a href="#home">home</a>
musi odpowiadać czemuś w DOM jak <div id="home"></div>
.
Elementy inne niż :visible
docelowe zostały zignorowane
Elementy docelowe, które nie są :visible
zgodne z jQuery , zostaną zignorowane, a odpowiadające im elementy nawigacyjne nigdy nie zostaną podświetlone.
Metody
.scrollspy('refresh')
Używając scrollspy w połączeniu z dodawaniem lub usuwaniem elementów z DOM, musisz wywołać metodę refresh w następujący sposób:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Niszczy scrollspy elementu.
Opcje
Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-
, jak w data-offset=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
zrównoważyć | numer | 10 | Piksele do przesunięcia od góry podczas obliczania pozycji przewijania. |
metoda | strunowy | automatyczny | Sprawdza, w której sekcji znajduje się szpiegowany element. auto wybierze najlepszą metodę, aby uzyskać współrzędne przewijania. offset użyje metody przesunięcia jQuery, aby uzyskać współrzędne przewijania. position użyje metody pozycji jQuery, aby uzyskać współrzędne przewijania. |
cel | ciąg | jQuery obiekt | element DOM | Określa element do zastosowania wtyczki Scrollspy. |
Wydarzenia
Typ wydarzenia | Opis |
---|---|
aktywuj.bs.scrollspy | To zdarzenie uruchamia się na elemencie scroll, gdy tylko nowy przedmiot zostanie aktywowany przez scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})