jQuery Plugin For Scroll Position Indicator - Progress Tracker

File Size: 7.24 KB
Views Total: 11751
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Scroll Position Indicator - Progress Tracker

Progress Tracker is a small jQuery plugin to create a fixed bullet indicator for one page scroll website that displays the reading progress based on the scroll position and allows for switch between different sections of content very smoothly.

How to use it:

1. Load the jQuery Progress Tracker plugin's stylesheet in the head section of your document.

<link href="jquery.progresstracker.css" rel="stylesheet">

2. Create content sections for your one page scroll website as follow.

<div class="container">
  <div class="pt-section" data-name="Section One" id="ptsection-one"></div>
  <div class="pt-section" data-name="Section Two" id="ptsection-two"></div>
  <div class="pt-section" data-name="Section Three" id="ptsection-three"></div>
  <div class="pt-section" data-name="Section Four" id="ptsection-four"></div>
</div>

3. Load jQuery library the jQuery Progress Tracker plugin's script before the closing body tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.progresstracker.js"></script>

4. Call the plugin to generate a progress indicator that stays on the right hand side of your web page.

$('body').progressTracker();

5. Default settings.

$('body').progressTracker({

// Allows for navigating between content sections
linking: true,

// "constant" = always visiable
// "hover" = shows on mouse hover
tooltip: "constant",

// The number specified is added to the default value at which the tracker changes to the next section.
positiveTolerance: 0,

// The number specified is subtracted from the default value at which the tracker changes to the next section. 
negativeTolerance: 0,

// Only displays the progress tracker when the user is between the top of the first section and the bottom of the last; 
// It is only shown when the tracker sections are in view. 
// Specify false if you want the tracker to always show.
displayWhenActive: true,

// Specify the value (in pixels) that you wish the progress tracker to be hidden when it is below that.
disableBelow: 0,

// Specifies what the plugin takes into account when deciding when to switch to the next section.
// "tracker" or "viewport"
tracking: "tracker"

});

Change log:

2016-05-18

  • Make data-name attr optional

2015-03-31

  • Adding check for length of section name

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