JS Scrollspy (scrollspy.js)
Wtyczka Scrollspy służy do automatycznej aktualizacji linków w liście nawigacji opartej na pozycji przewijania.
Samouczek o Scrollspy, przeczytaj naszą Bootstrap Scrollspy Tutorial .
Wskazówka: Wtyczka Scrollspy jest często używany wraz z umieszczają wtyczki.
Via data-* Atrybuty
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.
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 " za pośrednictwem JavaScript
Włącz ręcznie za pomocą:
Opcje Scrollspy
Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do teleinformatyczny, jak w danych offset = "".
| Nazwa | Rodzaj | Zaniedbanie | Opis | Spróbuj |
|---|---|---|---|---|
| offset | number | 10 | Określa liczbę pikseli od góry do offsetu przy obliczaniu pozycji przewijania | Spróbuj |
Scrollspy Metody
Poniższa tabela zawiera wszystkie dostępne metody scrollspy.
| metoda | Opis | Spróbuj |
|---|---|---|
| .scrollspy("refresh") | Podczas dodawania i usuwania elementów z scrollspy, sposób ten może być stosowany w celu odświeżenia dokumentu | Spróbuj |
Scrollspy Wydarzenia
Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń scrollspy.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| activate.bs.scrollspy | Występuje, gdy nowy element zostaje aktywowany przez scrollspy | Spróbuj |
Przykłady
Scrollspy z animowanym przewijania
Jak dodać gładką stronę przewinąć do kotwicy na tej samej stronie:
Płynne przewijanie
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); Spróbuj sam " Scrollspy & Nakleić
Korzystanie z umieszczają wtyczki wraz z wtyczką Scrollspy:
Menu poziome (pasek nawigacyjny)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Spróbuj sam " Pionowe menu (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Spróbuj sam "