Reading Position Indicator programmieren (CSS & JavaScript)
Der Reading Position Indicator ist ein Balken auf deiner Website der anzeigt, wie viel der Besucher bereits von deinem Inhalt gelesen hat – und so einfach kannst du ihn selber programmieren.
Lese Fortschritt Anzeige, Reading Progress Bar, Scroll Position oder Scroll Indicator: Die mysteriöse Leiste hat viele Namen. Ein einfaches Feature, welches deinem Besucher einen Überblick darüber gibt, wie viel er bereits von deinem Beitrag gelesen hat.
Besonders für Blogs ist ein Reading Position Indicator oft eine schöne Sache. Natürlich funktioniert er auch komplett responsive, also auch für alle Mobilgeräte. Hier kannst du ihn mal ausprobieren.
Der Reading Position Indicator ist auch ganz einfach in WordPress eingebunden. Wie das geht erfährst du im letzten Schritt.
1. HTML-Struktur entwerfen
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.
<div id="read-progress" class="progress"> <div class="progress-bar"></div> </div>
2. Reading Position Indicator stylen (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.
Pssssst! Kennst du schon diese CSS Tipps & Tricks?
Das grundlegende Styling ist mit diesen wenigen Zeilen erledigt. Hierbei ist der Balken immer am oberen Ende deiner Website.
.progress {
width: 100%;
position: fixed;
top: 0;
left: 0;
height: 7px;
background-color: #d3d3d3;
}
.progress > .progress-bar {
height: 7px;
width: 0px;
background-color: #3d50a7;
}
Wenn du die Leiste lieber am unteren Rand haben möchtest kannst du diesen CSS-Code verwenden.
.progress {
width: 100%;
position: fixed;
top: calc(100vh - 7px);
left: 0;
height: 7px;
background-color: #d3d3d3;
}
.progress > .progress-bar {
height: 7px;
width: 0px;
background-color: #3d50a7;
}
Alle Parameter (Dicke, Farbe, …) kannst du natürlich nach deinen Wünschen anpassen.
3. Funktionalität erstellen (JavaScript)
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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Danach kannst du schon diesen Code in deine JavaScript-Datei einfügen oder per <script>-Tag nach der jQuery Einbindung.
$(function() {
$(window).scroll(function() {
let offset = $(window).scrollTop();
let windowHeight = $(window).height();
let height = $(document).height();
let progress = (offset / (height - windowHeight)) * 100;
$("#read-progress .progress-bar").css("width", progress + "%");
});
});
Der Code berechnet bei jedem Scroll-Event anhand der Höhe und der Scrollposition den aktuellen Progress in Prozent und setzt den farbigen Balken in die entsprechende Breite.
Viele vermeintlich komplexe Sachen lassen sich recht einfach selber programmieren. Willst du z.B. wissen, wie man einen eigenen WYSIWYG Editor programmieren kann?
Reading Progress Bar in WordPress einbinden
Wenn du WordPress verwendest kannst du diesen Code natürlich auch verwenden. Dazu packst du den Code einfach an folgende Stellen:
| HTML | footer.php oder header.php |
| CSS | style.css |
| jQuery Einbindung | footer.php (vor schließenden <body>-Tag) |
| JavaScript | Beliebige .js-Datei oder nach jQuery Einbindung |
Wenn du noch Fragen zur Einbindung oder Funktionalität hast, schreib gern einen Kommentar.
Wie fandest du diesen Beitrag?
-
Pingback: Von jQuery zu Vanilla JS - So stellst Du Deine Seite bequem um