Bootstrap 4 Scrollspy (zaawansowane)
Bootstrap 4 Scrollspy
Scrollspy służy do automatycznego aktualizowania linków na liście nawigacyjnej na podstawie pozycji przewijania .
Jak stworzyć ScrollSpy
Poniższy przykład pokazuje, jak stworzyć scrollspy:
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><a href="#section1">Section 1</a></li>
...
</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>
Przykład wyjaśniony
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".
Pionowe menu Scrollspy
W tym przykładzie jako menu używamy pionowych pigułek nawigacyjnych Bootstrap:
Przykład
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Kompletna dokumentacja Bootstrap Scrollspy
Aby uzyskać pełne informacje o wszystkich opcjach, metodach i zdarzeniach scrollspy, przejdź do naszego podręcznika Bootstrap JS Scrollspy Reference .