Bootstrap JS Scrollspy
JS Scrollspy
Scrollspy wird verwendet, um Links in einer Navigationsliste basierend auf der Scrollposition automatisch zu aktualisieren.
Für ein Tutorial zu Scrollspy lesen Sie unser Bootstrap Scrollspy Tutorial .
Ü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-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</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 |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Scrollspy-Ereignisse
Die folgende Tabelle listet alle verfügbaren Scrollspy-Ereignisse auf.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |