Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Scrollspy: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in eine aufregende Bootstrap-Funktion namens Scrollspy ein. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie durch dieses Thema Schritt für Schritt führen, genau wie ich es in den letzten Jahren für meine Schüler gemacht habe. Holen Sie sich eine Tasse Kaffee und los geht's!

Bootstrap - Scrollspy

Was ist Scrollspy?

Bevor wir uns den technischen Details zuwenden, lassen Sie uns verstehen, was Scrollspy ist. Stellen Sie sich vor, Sie lesen einen langen Artikel im Internet und während Sie scrollen, wird die Navigationsleiste automatisch hervorgehoben, um den Abschnitt anzuzeigen, den Sie gerade lesen. Genau das ist Scrollspy in Aktion! Es ist eine kleine, aber feine Funktion, die das Benutzererlebnis verbessert, indem sie visuelles Feedback über die aktuelle Position des Benutzers im Inhalt bietet.

Funktion

Scrollspy funktioniert, indem es die Scrollposition Ihrer Webseite überwacht und den aktiven Status Ihrer Navigationspunkte accordingly aktualisiert. Es ist, als hätten Sie einen kleinen Spion (daher der Name!), der beobachtet, wo Sie sich auf der Seite befinden und Ihrem Navigationsmenü sagt: "Hey, der Benutzer ist jetzt hier!"

Schauen wir uns ein einfaches Beispiel an:

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  <div id="navbar-example">
    <ul class="nav nav-tabs">
      <li class="nav-item"><a class="nav-link" href="#section1">Abschnitt 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#section2">Abschnitt 2</a></li>
    </ul>
  </div>

  <div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
    <h4 id="section1">Abschnitt 1</h4>
    <p>...</p>
    <h4 id="section2">Abschnitt 2</h4>
    <p>...</p>
  </div>
</body>

In diesem Beispiel weisen wir Bootstrap an, die Scrollposition zu überwachen (data-bs-spy="scroll") und die Navigationsleiste in #navbar-example zu aktualisieren. Während Sie durch den Inhalt scrollen, wird der entsprechende Navigationspunkt hervorgehoben.

Navbar

Eine der häufigsten Verwendungen von Scrollspy ist in einer Navigationsleiste. Schauen wir uns ein detaillierteres Beispiel an:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navigationsleiste</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">Erster</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Zweiter</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">Erster Überschrift</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Zweite Überschrift</h4>
  <p>...</p>
</div>

In diesem Beispiel haben wir eine Navigationsleiste mit zwei Links. Während Sie durch den Inhalt scrollen, wird der entsprechende Navigationspunkt hervorgehoben. Es ist, als hätten Sie einen GPS für Ihre Webseite!

Geschachtelte Navigation

Manchmal möchten Sie möglicherweise geschachtelte Navigationspunkte verwenden. Scrollspy kann das auch! Hier ist, wie man das macht:

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navigationsleiste</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Element 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Element 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Element 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Element 2</a>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Element 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Element 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Element 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Element 2</h4>
  <p>...</p>
</div>

Dies erstellt eine geschachtelte Navigationsstruktur, die sich aktualisiert, während Sie durch verschiedene Abschnitte und Unterkapitel scrollen. Es ist, als hätten Sie Kapitel und Unterkapitel in einem Buch, aber interaktiv!

Listengruppe

Scrollspy ist nicht nur auf Navigationsleisten beschränkt. Sie können es auch mit Listengruppen verwenden:

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Element 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Element 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Element 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Element 2</h4>
  <p>...</p>
</div>

Dies erstellt eine Listengruppe, die sich aktualisiert, während Sie durch den Inhalt scrollen. Es ist, als hätten Sie ein Inhaltsverzeichnis, das genau weiß, wo Sie sich im Buch befinden!

Einfache Anker

Manchmal möchten Sie möglicherweise einfache Ankertexte anstelle einer vollständigen Navigationsleiste oder Listengruppe verwenden:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navigationsleiste</a>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
</div>

Dies erstellt einfache Ankertexte, die sich aktualisieren, während Sie scrollen. Es ist, als hätten Sie Lesezeichen in Ihrer Webseite, die aufleuchten, wenn Sie sie erreichen!

Unsichtbare Elemente

Scrollspy kann sogar mit Elementen arbeiten, die initially nicht sichtbar sind:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navigationsleiste</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

<script>
  var scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: '#navbar-example2'
  })
</script>

In diesem Beispiel funktioniert Scrollspy auch mit Elementen, die initially nicht sichtbar sind, wenn sie in den Blickwinkel kommen.

Verwendung

Um Scrollspy zu verwenden, müssen Sie drei Dinge tun:

  1. Fügen Sie data-bs-spy="scroll" dem Element hinzu, das Sie überwachen möchten (normalerweise das <body>).
  2. Fügen Sie data-bs-target="#navId" hinzu, um die Navigationsleiste zu spezifizieren, die für Scrollspy verwendet werden soll.
  3. Fügen Sie data-bs-offset="" hinzu, um die Pixelanzahl zu spezifizieren, die von der Oberkante abgerückt werden soll, wenn die Position berechnet wird.

Hier ist eine Tabelle aller Datenattribute, die Sie verwenden können:

Attribut Beschreibung
data-bs-spy Aktiviert Scrollspy
data-bs-target Gibt an, welche Navigationsleiste für Scrollspy verwendet werden soll
data-bs-offset Pixelanzahl, die von der Oberkante abgerückt werden soll, wenn die Position berechnet wird
data-bs-method Findet heraus, in welchem Abschnitt sich das überwachte Element befindet

Optionen

Sie können Scrollspy auch mit JavaScript initialisieren:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Hier ist eine Tabelle aller Optionen, die Sie verwenden können:

Option Typ Standard Beschreibung
offset number 10 Pixelanzahl, die von der Oberkante abgerückt werden soll, wenn die Position berechnet wird
method string 'auto' Findet heraus, in welchem Abschnitt sich das überwachte Element befindet
target string '' Gibt an, welche Navigationsleiste für Scrollspy verwendet werden soll

CSS-Eigenschaften

Scrollspy verwendet einige CSS-Eigenschaften, um seine Magie zu vollbringen:

.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: .5rem;
  overflow: auto;
}

Die Eigenschaften position: relative und overflow: auto sind entscheidend für die korrekte Funktion von Scrollspy.

Und das war's! Sie sind jetzt mit dem Wissen ausgestattet, Bootstrap's Scrollspy-Funktion zu verwenden. Denken Sie daran, dass Übung den Meister macht,also experimentieren Sie ruhig mit diesen Beispielen. Viel Spaß beim Programmieren und möge Ihr Scrollen immer glatt sein!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap - Fortschrittsanzeige
Nächstes Tutorial:
Bootstrap - Ladeindikatoren