Veröffentlichungsdatum: 08. Januar 2018
Änderungsdatum: 11. Januar 2018
weblication cms scrollen fortschritt scroll-fortschritt lesefortschritt
Zeigen Sie Seitenbesuchern beim Scrollen langer Seiten den Lesefortschritt an.
Speziell bei langen Seiten / Artikeln macht es Sinn, dem Seitenbesucher den Lesefortschritt anzuzeigen. Auch auf mobilen Endgeräten ist diese Funktion nützlich, damit der Leser motiviert wird, den Beitrag / Text komplett zu lesen.
Sowohl die BASE Classic als auch BASE (Mobile First) ermöglichen dies durch Verwendung des HTML5 progress-Tags und über die ui.js JavaScript-Datei in Verbindung mit CSS. Hierzu muss lediglich die ui.js auf aktuellstem Stand sein und für die Anzeige des Scrollbalkens im entsprechenden Selektor die Klasse wglAddScrollProgress hinzugefügt werden.
Sowohl für BASE Classic als auch BASE (Mobile First) können Sie die Funktion als Weblic® "Scroll-Fortschritt" installieren, womit Sie die CSS-Styles als Grundlage verfügbar haben.
Die BASE (Mobile First) erlaubt die Einstellung dann über den Layoutwizard.
In der BASE Classic fügen Sie wie unten angegeben die Klasse im gewünschten Element hinzu.
Es steht mit diesem Weblic® also kein Strukturelement zum Einfügen über den Struktureditor zur Verfügung, sondern es werden mit dem Weblic®
lediglich die erforderlichen JavaScript- und CSS-Dateien mitgeliefert.
body {-w-add-classes:wglAddScrollProgress;} #scrollProgress { position:fixed; top:0; /* zeigt den Scroll-Fortschrittbalken oben an (bottom:0; zeigt diesen unten an) */ /* ... */ } body #scrollProgress { position:fixed; }
/* Gestaltung der Kopfbereichs */ #blockTop {/* ... */;-w-add-classes:wglAddScrollProgress;}
/* Gestaltung der Kopfbereichs */ #blockHeader { /* ... */ -w-add-classes:wglAddScrollProgress;
Der Scroll-Fortschritt kann generell oder auch nur für bestimmte
Objekttypen angezeigt werden. Dazu genügt es, den im HTML-Element
eingetragenen Objekttyp zu ergänzen.
.object-news body {
-w-add-classes:wglAddScrollProgress;
}
Das Aussehen des Scroll-Fortschritt Balkens können Sie über die mitgelieferten CSS-Styles individuell formatieren.