Reading Position Indicator mit jQuery programmieren

Reading Position Indicator mit jQuery programmieren

Lese Forstschritt Anzeige, Scroll Position oder Scroll Indicator: Die mysteriöse Leiste hat viele Namen, doch der Bekannteste ist wohl Reading Position Indicator. Eine solche Leiste findest Du auch am Header dieses Beitrags. Hier erfährst Du, wie Du dieses Feature mit jQuery und CSS programmierst.

1. HTML-Struktur vorbereiten

Zuerst benötigen wir die eigentliche Leiste. Dazu legen wir einen Container an, den wir später auf volle Breite setzen und einen Container innerhalb, der immer so lang ist, wie der aktuelle Fortschritt sein soll. Ein Beispiel für diese Struktur kann so aussehen:

<div id="read-progress" class="progress">
  <div class="progress-bar"></div>
</div>

2. Stylen mittels CSS

Wenn Du Bootstrap in deine Seite eingebunden hast, kannst Du eine fertige Progressbar benutzen und kannst diesen Schritt überspringen. Den Link dazu findest Du hier.

Wenn Du das CSS selber schreiben möchtest, kannst Du diese Struktur als Grundgerüst benutzen und z.B. noch Farben und Stärke anpassen:

.progress {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #d3d3d3;
}
.progress > .progress-bar {
  height: 5px;
  width: 0px;
  background-color: #FF0000;
}

3. jQuery Funktionen programmieren

Nun kommt der spannendste und wichtigste Teil des Features. Dazu binden wir zuerst jQuery vor dem schließenden body-Tag ein und anschließend den Code für die Leiste.

<script loading="lazy" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

JQuery kannst Du entweder über folgenden script-Tag einbinden oder Du lädst es herunter und bindest es lokal ein.

Die folgende Funktion ist bewusst ohne ES6-Features programmiert, da einige Browser viele neue Funktionalitäten immer noch nicht unterstützen.

$(function() {
  $(window).scroll(function() {

    var offset = $(window).scrollTop();
    var windowHeight = $(window).height();
    var height = $(document).height();

    var progress = (offset / (height - windowHeight)) * 100;

    $("#read-progress.progress-bar").css("width", progress + "%");
  });
});

Und das war’s! Dein Reading Position Indicator ist fertig.

NEW 🚀
NEW 🚀
NEW 🚀

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.