Reading Position Indicator mit jQuery & CSS programmieren

Reading Position Indicator mit jQuery & CSS programmieren Thumbnail
Veröffentlicht am 30. April 2019Zuletzt aktualisiert am 20. Mai 2020

Lese Forstschritt Anzeige, Scroll Position oder Scroll Indicator: Die mysteriöse Leiste hat viele Namen, doch der Bekannteste ist wohl Reading Position Indicator. Hier erfährst Du, wie Du dieses Feature mit jQuery und CSS ganz einfach selber programmieren kannst.

Anzeige

Der Reading Position Indicator ist für viele Seiten, gerade Blogs mit entsprechenden Artikeln eine gern gesehene Funktion. Dadurch hat der Leser eine bessere Vorstellung wie lang der jeweilige Artikel noch ist und schön anzuschauen ist es auch noch häufig. 🙂

Beispiel Reading Position Indicator

Für WordPress Seiten gibt es zwar entsprechende Plugins, allerdings wirst Du gleich feststellen, dass Du diese Funktion auch ganz einfach selber programmieren kannst.

Anzeige

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.

Aber Achtung, es gibt einige Regeln, die Du beim Verwenden von CSS beachten solltest!

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:

Anzeige
.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.5.1/jquery.min.js"></script>

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

$(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. Den Code kannst Du jetzt entsprechend Deiner Seite ins HTML oder PHP einfügen. Außerdem gibt es noch weitere Features, die Du ganz einfach selber erstellen kannst, z.B. einen eigenen WYSIWYG Editor mit reinem JavaScript.

Ähnliche Beiträge
NEW 🚀
Schreib einen Kommentar

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