Bootstrap 5-Scrollspy

Scrollspy

Scrollspy wird verwendet, umScrollenDer Standort aktualisiert automatisch die Links in der Navigationsliste.

Wie erstellt man einen Scrollspy?

Wie erstellt man einen Scrollspy?

Das folgende Beispiel zeigt, wie ein Scrollspy erstellt wird:

Beispiel
<!-- Scrollbarer Bereich -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigationsleiste - <a> Elemente werden verwendet, um zu einem bestimmten Abschnitt im scrollbaren Bereich zu springen -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Abschnitt 1</a></li>
</nav>
<div id="section1">
  <!-- Abschnitt 1 -->
  <h1>Abschnitt 1</h1>
<p>Probieren Sie, diese Seite zu scrollen und betrachten Sie die Navigationsleiste, während Sie scrollen!</p>
</div>
...

</body>

Versuchen Sie es selbst

Erklärung des Beispiels data-bs-spy="scroll" Fügen Sie hinzu zu dem Element, das als scrollbarer Bereich verwendet wird (normalerweise <body> Element hinzu).

Fügen Sie dann data-bs-target Eigenschaft, deren Wert id oder die Klassennamens des Navigationsleiste ist (.navbar). Dies dient dazu, sicherzustellen, dass die Navigationsleiste mit dem scrollbaren Bereich verbunden ist.

Bitte beachten Sie, dass das scrollbare Element mit dem Link ID in der Navigationsleiste übereinstimmen muss (<div id="section1"> Passen <a href="#section1">)

Optional data-bs-offset Die Eigenschaft legt die Anzahl der Pixel fest, die vom oberen Rand abgezogen werden, wenn der Scrollposition berechnet wird. Wenn die Aktivitätsstatusänderung zu früh gespürt wird, wenn der Link im Navigationsleiste zu einem scrollbaren Element springt, ist dies sehr nützlich. Standardwert ist 10 Pixel.

Relative Positionierung erforderlichElemente mit data-bs-spy="scroll" erfordern CSS Position Die Werte der Eigenschaft müssen auf "relative" gesetzt werden, um ordnungsgemäß zu funktionieren.