Das Scrollspy Plugin
Das Scrollspy Plugin wird verwendet, um automatisch zu aktualisieren, Links in einer Navigationsliste basiert auf Scroll-Position.
So erstellen Sie eine Scrollspy
Das folgende Beispiel zeigt, wie ein scrollspy zu erstellen:
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 " Beispiel erklärt
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.
Scrollspy Vertical Menu
In diesem Beispiel verwenden wir vertikale Navigation Pillen als Menü des Bootstrap:
Beispiel
<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> Versuch es selber " Füllen Sie Bootstrap Scrollspy Referenz
Eine vollständige Referenz aller scrollspy Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Scrollspy Referenz .