Responsive Scroll Position Indicator Plugin With jQuery - scroll.js

scroll.js is a really simple jQuery plugin that creates a progress bar to indicate the user's current scroll position on your website. The plugin uses document.addEventListener() method to detect / calculate the scroll position and will auto refresh the indicator bar on window resize. Dual licensed under the MIT or GPL Version 2 licenses.

How to use it:

1. Include jQuery library and the jQuery scroll.js script on your website.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery/scroll.js"></script> 

2. Create the html for the scroll position indicator.

<div class="scrollbar">
  <div class="bar"></div>
</div>

3. Style the indicator and stick it at the top or bottom of the webpage.

.scrollbar {
  width: 100%;
  height: 30px;
  background-color: #F0F0F0;
  border-top: 1px solid #CCC;
  position: fixed;
  bottom: 0;
  overflow: hidden;
}

.bar {
  width: 0px;
  height: 29px;
  background-color: #466068;
  position: fixed;
}

---

This awesome jQuery plugin is developed by MitchRompelman. For more Advanced Usages, please check the demo page or visit the official website.