Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Das Scrollspy-Plugin wird verwendet, um Links in einer Navigationsliste basierend auf der Scroll-Position automatisch zu aktualisieren.
Für ein Tutorial zu Scrollspy lesen Sie unser Bootstrap Scrollspy Tutorial .
Tipp: Das Scrollspy-Plugin wird oft zusammen mit dem Affix - Plugin verwendet.
Über data-* Attribute
Fügen Sie data-spy="scroll"dem Element hinzu, das als scrollbarer Bereich verwendet werden soll (häufig ist dies das <body>Element).
Fügen Sie dann das data-targetAttribut mit einem Wert der ID oder dem Klassennamen der Navigationsleiste ( .navbar) hinzu. Dadurch wird sichergestellt, dass die Navigationsleiste mit dem scrollbaren Bereich verbunden ist.
<div id="section1">Beachten Sie, dass scrollbare Elemente mit der ID der Links in den Listenelementen der Navigationsleiste übereinstimmen müssen (matchs <a href="#section1">).
Das optionale data-offsetAttribut gibt die Anzahl der Pixel an, die bei der Berechnung der Bildlaufposition vom oberen Rand versetzt werden sollen. Dies ist nützlich, wenn Sie das Gefühl haben, dass die Links in der Navigationsleiste den aktiven Status zu früh oder zu früh ändern, wenn Sie zu den scrollbaren Elementen springen. Standard ist 10 Pixel.
Relative Positionierung erforderlich: Das Element mit data-spy="scroll" erfordert die CSS- Positionseigenschaft mit dem Wert "relative", um ordnungsgemäß zu funktionieren.
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>
Über JavaScript
Manuell aktivieren mit:
Beispiel
$('body').scrollspy({target: ".navbar"})
Scrollspy-Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data- an, wie in 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 |
Scrollspy-Methoden
Die folgende Tabelle listet alle verfügbaren Scrollspy-Methoden auf.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Scrollspy-Ereignisse
Die folgende Tabelle listet alle verfügbaren Scrollspy-Ereignisse auf.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Mehr Beispiele
Scrollspy mit animierter Schriftrolle
So fügen Sie einem Anker auf derselben Seite einen reibungslosen Seitenlauf hinzu:
Flüssiges Scrollen
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// 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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Scrollspy & Affix
Verwendung des Affix -Plugins zusammen mit dem Scrollspy-Plugin:
Horizontales Menü (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>
Vertikales Menü (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>