Scrollgress

Inspired by Pitchfork, Scrollgress is a simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.

Progress can be measured as the user scrolls the page or an element that has
overflow: scroll | auto or overflow-y: scroll | auto.

See a demo

See a demo using an overflow element

Instructions

Include jQuery and the plugin in the head or footer of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="/js/plugins/scrollgress.js"></script>

Initialize the plugin targeting the class, ID or element that you want to display the scroll progress of.

$('body').scrollgress();

Options

1. height: "Npx"
   A string that defines the height of the progress bar in pixels (default: '5px').
2. color: color
   A string that defines the color of the progress bar (default: '#ff0000').
3. success: function()
   A callback function that runs after scrollgress has been initiated (default: function()).
4. complete: function()
   A callback function that runs after you've reached the end of the page (default: function()).

Example:

$(function() {  	$('.post').scrollgress({ 		height: '10px', 		color: '#990000', 		success: function() { 			console.log('Scrollgress has been initiated.'); 		} 	});  });