Bootstrap JS Scrollspy
JS Scrollspy
Scrollspy służy do automatycznego aktualizowania linków na liście nawigacyjnej na podstawie pozycji przewijania.
Samouczek dotyczący Scrollspy znajdziesz w naszym samouczku Bootstrap Scrollspy .
Przez dane-* Atrybuty
Dodaj data-spy="scroll"do elementu, który ma być używany jako obszar przewijany (często jest to <body>element).
Następnie dodaj data-targetatrybut z wartością identyfikatora lub nazwą klasy paska nawigacyjnego ( .navbar). Ma to na celu upewnienie się, że pasek nawigacyjny jest połączony z obszarem przewijania.
Zwróć uwagę, że elementy przewijalne muszą odpowiadać identyfikatorom łączy w elementach listy paska nawigacyjnego ( <div id="section1">pasuje <a href="#section1">).
Atrybut opcjonalny data-offsetokreśla liczbę pikseli do przesunięcia od góry podczas obliczania pozycji przewijania. Jest to przydatne, gdy czujesz, że linki w pasku nawigacyjnym zmieniają stan aktywny zbyt wcześnie lub zbyt wcześnie podczas przechodzenia do przewijalnych elementów. Wartość domyślna to 10 pikseli.
Wymaga względnego pozycjonowania: element z data-spy="scroll" do poprawnego działania wymaga właściwości CSS position o wartości "relative".
Przykład
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Przez JavaScript
Włącz ręcznie za pomocą:
Przykład
$('body').scrollspy({target: ".navbar"})
Opcje Scrollspy
Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, tak jak w data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Metody Scrollspy
W poniższej tabeli wymieniono wszystkie dostępne metody scrollspy.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Wydarzenia Scrollspy
Poniższa tabela zawiera listę wszystkich dostępnych zdarzeń scrollspy.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |