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ł, wymagautil.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 masz heightustawiony i overflow-y: scroll;zastosowany.
Kotwice ( <a>) są wymagane i muszą wskazywać na element z tym id.

Po pomyślnym wdrożeniu twoja nawigacja lub grupa listy zostaną odpowiednio zaktualizowane, przenosząc .activeklasę z jednego elementu do drugiego na podstawie powiązanych z nimi celów.

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 .navs. Jeśli zagnieżdżony .navjest .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-groups. Przewiń obszar obok grupy listy i obserwuj aktywną zmianę klasy.

Przedmiot 1 Pozycja 2 Pozycja 3 Pozycja 4

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-targetatrybut z identyfikatorem lub klasą elementu nadrzędnego dowolnego .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>

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ą :visiblezgodne 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...
})

Szpieg przewijania

Jak to działa

Przykład w pasku nawigacyjnym

@tłuszcz

@mdo

jeden

two

three

Przykład z zagnieżdżoną nav

Przedmiot 1

Pozycja 1-1

Pozycja 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Przykład z list-group

Przedmiot 1

Pozycja 2

Pozycja 3

Pozycja 4

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

Wymagane identyfikowalne cele identyfikacyjne

Elementy inne niż :visibledocelowe zostały zignorowane

Metody

.scrollspy('refresh')

.scrollspy('dispose')

Opcje

Wydarzenia

Elementy inne niż `:visible`docelowe zostały zignorowane

`.scrollspy('refresh')`

`.scrollspy('dispose')`