This topic is a prime example of why I write this web log. I've seen this functionality on countless web pages and mobile apps, but for some reason it is not well explained in most of the areas you will likely first wind up when searching for instructions on how to do this (if you wound up here first great, yay me).
The key code is all in $(window).scroll(function(). You have these 3 main components:
With these values you can set the width of the progress bar (the div with the class "scroll-progress-container"). The width is a simple calculation: scrollTop / (docHeight - windowHeight) * 100.
So you can attach this logic to an anonymous function within the browser's window scroll event a la: $(window).scroll(function() { ...
And then simply assign the result of "$(window).scrollTop() / (docHeight - windowHeight) * 100;" to the width property of your <div class="scroll-progress">.
References
https://www.veracode.com/blog/managing-appsec/building-scroll-progress-bar-javascript-and-jquery
https://stackoverflow.com/questions/14035819/window-height-vs-document-height
Potential applications of progress on scroll might be a "Terms and Conditions" view, a code walk-through, etc.
The key code is all in $(window).scroll(function(). You have these 3 main components:
- Document Height: $(document).height() === height of "viewable" window aka viewport
- Window Height: $(window).height() === height of document being rendered
- Scroll Top: $(window).scrollTop() === number of pixels content is scrolled
With these values you can set the width of the progress bar (the div with the class "scroll-progress-container"). The width is a simple calculation: scrollTop / (docHeight - windowHeight) * 100.
So you can attach this logic to an anonymous function within the browser's window scroll event a la: $(window).scroll(function() { ...
And then simply assign the result of "$(window).scrollTop() / (docHeight - windowHeight) * 100;" to the width property of your <div class="scroll-progress">.
That's it.
Code:
<!doctype html>
<head>
<title></title>
<style>
.header-container {
width: 100%;
height: 60px;
background-color: white;
position: fixed;
z-index: 10;
top: 0;
left: 0;
}
.header {
padding-left: 10px;
}
h1 {
margin-top: 15px;
}
.scroll-progress-container {
width: 100%;
height: 5px;
background-color: white;
top: 55px;
position: absolute;
}
.scroll-progress {
width: 0px;
height: 5px;
background-color: purple;
}
.filler-text {
width: 60%;
margin-top: 80px;
margin-left: 50px;
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
var docHeight = $(document).height(),
windowHeight = $(window).height(),
scrollPercent;
$(window).scroll(function() {
scrollPercent = $(window).scrollTop() / (docHeight - windowHeight) * 100;
$('.scroll-progress').width(scrollPercent + '%');
});
});
</script>
</head>
<body>
<div class="header-container">
<div class="header">
<h1>Progress Scroll Bar Example</h1>
</div>
<div class="scroll-progress-container">
<div class="scroll-progress"></div>
</div>
</div>
Enter lots and lots of text here...
</body>
</html>
References
https://www.veracode.com/blog/managing-appsec/building-scroll-progress-bar-javascript-and-jquery
https://stackoverflow.com/questions/14035819/window-height-vs-document-height
