Preview-Image: Progress-Bar with Scroll-Indicator

Visualisierung des Scroll-Fortschrittes

Macht sich gut bei langen Seiten wie One-Pager und Blogeinträgen.

HTML

<div class="progressCon">
<div id="progress" class="progress"></div>
</div>

CSS

.progressCon{
position:fixed; top:0; left:0; width:100%; height:4px; background:#213159; z-index:1111;
}
.progress{
height:4px; background:#decea6; width:0; transition:width 0.25s; z-index:11111;
}

JavaSrcipt // pure & small

<script>
function updateProgress(num1, num2){
var percent = Math.ceil( num1 / num2 * 100 ) + '%';
document.getElementById('progress').style.width = percent;
}
window.addEventListener('scroll', function(){
var top = window.scrollY;
var height = document.body.getBoundingClientRect().height - window.innerHeight;
updateProgress(top, height);
});
</script>

adapted from:


sources:

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.