JS Scrollspy (scrollspy.js)
Das Scrollspy Plugin wird verwendet, um automatisch zu aktualisieren, Links in einer Navigationsliste basiert auf Scroll-Position.
Ein Tutorial über Scrollspy, unsere lesen Bootstrap Scrollspy Tutorial .
Tipp: Das Scrollspy Plugin oft zusammen mit dem verwendet wird Affix - Plugin.
Via data-* Attribute
In data-spy="scroll" auf das Element , das als rollbarer Bereich verwendet werden soll (oft ist dies der <body> Element).
Dann fügen Sie die data-target - Attribut mit einem Wert der ID oder der Klassenname der Navigationsleiste ( .navbar ). Dies ist , um sicherzustellen , dass die navbar mit dem rollbaren Bereich verbunden ist.
Beachten Sie, dass rollbaren Elemente die ID der Links in der Navigationsleiste der Listenelemente entsprechen muss ( <div id="section1"> passt <a href="#section1"> ).
Die optionale data-offset - Attribut gibt die Anzahl der Pixel von oben zu kompensieren , wenn die Position des Scroll - Berechnung. Dies ist nützlich, wenn Sie das Gefühl, dass die Links in der Navigationsleiste zu früh in den aktiven Zustand ändert oder zu früh, wenn sie den rollbaren Elemente springen. Die Standardeinstellung ist 10 Pixel.
Benötigt relative Positionierung: Das Element mit data-spy="scroll" die CSS erfordert position Eigenschaft, mit einem Wert von "relative" richtig zu arbeiten.
Beispiel
<!-- 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>
Versuch es selber " Via JavaScript
Aktivieren Sie manuell mit:
Scrollspy Optionen
Die Optionen können über Datenattribute oder JavaScript übergeben werden. Für die Datenattribute, die Option Namen Daten- anhängen, wie in Daten-Offset = "".
| Name | Art | Standard | Beschreibung | Versuch es |
|---|---|---|---|---|
| offset | number | 10 | Gibt die Anzahl der Pixel von oben zu kompensieren, wenn die Position des Scroll-Berechnung | Versuch es |
Scrollspy Methoden
Die folgende Tabelle listet alle verfügbaren scrollspy Methoden.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .scrollspy("refresh") | Beim Hinzufügen und Elemente aus der scrollspy entfernen, kann dieses Verfahren verwendet werden, um das Dokument zu aktualisieren, | Versuch es |
Scrollspy Veranstaltungen
Die folgende Tabelle listet alle verfügbaren scrollspy Veranstaltungen.
| Event | Beschreibung | Versuch es |
|---|---|---|
| activate.bs.scrollspy | Tritt ein, wenn ein neues Element der scrollspy aktiviert wird | Versuch es |
Beispiele
Scrollspy mit animierten blättern
Wie eine glatte Seite blättern zu einem Anker auf der gleichen Seite hinzuzufügen:
Weiches Scrollen
// 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;
});
}); Versuch es selber " Scrollspy & Affix
Mit dem Affix - Plugin zusammen mit dem Scrollspy Plugin:
Horizontal Menu (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Versuch es selber " Vertical 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> Versuch es selber "