Scrollspy wird verwendet, um Links in einer Navigationsliste basierend auf der Scroll-Position automatisch zu aktualisieren.
Das folgende Beispiel zeigt, wie man einen Scrollspy erstellt:
<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-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><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>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
Fügen Sie data-bs-spy="scroll" zu dem Element hinzu, das als scrollbarer Bereich verwendet werden soll (häufig ist dies der ). <body>-Element).
Fügen Sie dann das Attribut data-bs-target mit einem Wert der ID oder dem Klassennamen der Navigationsleiste (.navbar) hinzu ). Dadurch wird sichergestellt, dass die Navigationsleiste mit dem scrollbaren Bereich verbunden ist.
Beachten Sie, dass scrollbare Elemente mit der ID der Links in den Listenelementen der Navigationsleiste übereinstimmen müssen (<div id="section1"> entspricht <a href="#section1">).
Das optionale Attribut data-bs-offset gibt die Anzahl der Pixel an, die bei der Berechnung der Scrollposition vom oberen Rand versetzt werden sollen. Dies ist nützlich, wenn Sie das Gefühl haben, dass die Links in der Navigationsleiste ihren aktiven Status zu früh oder zu früh ändern, wenn Sie zu den scrollbaren Elementen springen. Der Standardwert ist 10 Pixel.
Erfordert relative Positionierung: Das Element mit data-bs-spy="scroll" erfordert die CSS-Eigenschaft position mit dem Wert „relative“, um ordnungsgemäß zu funktionieren.