Scrollspy Plugin
Wtyczka Scrollspy służy do automatycznej aktualizacji linków w liście nawigacji opartej na pozycji przewijania.
Jak utworzyć Scrollspy
Poniższy przykład pokazuje, jak utworzyć 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-inverse navbar-fixed-top">
...
<ul class="nav
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> Spróbuj sam " Przykład Poradnik
Dodaj data-spy="scroll" z elementem, który powinien być wykorzystany jako obszar przewijalnej (często jest to <body> element).
Następnie dodać data-target atrybut o wartości id lub nazwa klasy pasku nawigacyjnym ( .navbar ). To jest upewnienie się, że navbar jest połączony z obszarem przewijalnej.
Należy pamiętać, że elementy przewijalne musi pasować identyfikator łącza wewnątrz lista elementów na pasku nawigacyjnym'S ( <div id="section1"> pasuje <a href="#section1"> ).
Opcjonalne data-offset atrybut określa liczbę pikseli w celu skompensowania od góry przy obliczaniu pozycji przewijania. Jest to przydatne, gdy czujesz, że linki w pasku nawigacyjnym zmienia stan aktywny zbyt szybko lub zbyt wcześnie, kiedy skacze do przewijalnych elementów. Domyślnie jest to 10 pikseli.
Wymaga pozycjonowanie względne: Element z data-spy="scroll" wymaga CSS position nieruchomości, o wartości "relative" , aby działać poprawnie.
Scrollspy pionowe menu
W tym przykładzie używamy pionowych pigułki nawigacyjnych Bootstrap jako menu:
Przykład
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body> Spróbuj sam " Wypełnij Bootstrap Scrollspy Reference
Pełną odniesienia wszystkich scrollspy metod i zdarzeń, przejdź do naszej Bootstrap JS Scrollspy Reference .