Bootstrap Scrollspy-Plugin (Fortgeschritten)
Das Scrollspy-Plugin
Das Scrollspy-Plugin wird verwendet, um Links in einer Navigationsliste basierend auf der Scroll-Position automatisch zu aktualisieren.
So erstellen Sie einen Scrollspy
Das folgende Beispiel zeigt, wie man einen Scrollspy erstellt:
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>
Beispiel erklärt
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.
Vertikales Scrollspy-Menü
In diesem Beispiel verwenden wir die vertikalen Navigationspillen von Bootstrap als Menü:
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>
Vollständige Bootstrap-Scrollspy-Referenz
Eine vollständige Referenz aller Scrollspy-Methoden und -Ereignisse finden Sie in unserer Bootstrap JS Scrollspy-Referenz .