Customizable Page Scroll Progress Indicator Plugin For jQuery

The jQuery Advanced Scroll Progress Tracker plugin automatically generates a fixed scroll progress indicator from heading elements and allows linking between them. It is highly customizable and has a built-in linking function, so it can be used as an interactive table of contents. Fully responsive and mobile-friendly.

Using the various options it is also possible to display one tracker (for example vertical) on large screens and another (horizontal in this case) on small screens. On top of that it is very easy to control the position, behaviour and appearance of each tracker individually.

Basic usage:

1. To get started, load the following files in the section of your HTML document. Make sure you also load the latest jQuery library.

<link href="advanced-progress-tracker.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="advanced-progress-tracker.js"></script>

2. Initialize the plugin with default options.

$('body').progressTracker();

3. If you want the Scroll Progress Tracker to track a certain area only (instead of the whole page), you have to define a container with the id "TrackScrollProgress".

<div id="TrackScrollProgress">
  <!-- insert content here -->
</div>

4. To add the custom stops, you need to define sections with the class "trackThis" as follow:

<div class="trackThis">
  <!-- insert content here -->
</div>

5. In some cases you might want to display a different text than the h3-text on the progress tracker. This can be achieved by adding the data-name attribute to the headline. This will not affect the titles of the horizontal tracker if horOnlyActiveTitle is active or on small screens.

<h3 data-name="Introduction">Advanced jQuery scroll progress tracker</h3>

6. All default options.

// displays a HORIZONTAL scroll progress tracker
horTracker: true,  

// creates the HORIZONTAL tracker within an existing header if true
// you need to have a header in your markup for this to work; if this is active, then horPosition will be ignored             
horInHeader: false,             

// creates the HORIZONTAL tracker at the top of the page if set to 'top', at the bottom if set to 'bottom'
horPosition: 'top',   

// makes the HORIZONTAL tracker span the full width of the viewport if set to false      
horCenter: true,                    

// Sets the style of the HORIZONTAL tracker
horStyle: 'fill',   

// Sets the color of the default gradient for the HORIZONTAL tracker
// 'red', 'blue', 'green', 'orange', 'silver'   
horColor: 'red',                

// displays the HORIZONTAL tracker also on small screen devices if true        
horMobile: true,        

// hides the HORIZONTAL tracker on large screens if true
// useful if you want to use the VERTICAL tracker for large devices and the HORIZONTAL tracker for small screen; overrides 'horMobile: false'        
horMobileOnly: false,         

// adds stops for each section to the HORIZONTAL tracker if true  
horStops: true,              

// adds numbers to the stops of the HORIZONTAL TRACKER if true
// only makes sense if horStops is true   
horNumbering: true,         

// adds the headline (h3) of each section to the HORIZONTAL tracker if true    
horTitles: false,      

// moves the titles of the horizontal tracker off the progress bar if set to 'top' or 'bottom' (they overlay the bar if false)
// only makes sense if horTitles is true; this is automatically set to 'bottom' on small screen devices(!) if set to false         
horTitlesOffset: 'bottom',      

// displays only the headline of the currently active section in order to deal with space limitations if true
// only makes sense if horTitles is true; this is automatically forced on small screen devices(!)
horOnlyActiveTitle: true,       

// displays a VERTICAL scroll progress tracker
verTracker: false,        

// creates the VERTICAL tracker on the left side of the page if set to 'left', at the right side if set to 'right'      
verPosition: 'left',   

// Sets the style of the VERTICAL tracker
// 'beam', 'fill'
verStyle: 'beam',               

// Sets the color of the default gradient for the VERTICAL tracker
// 'red', 'blue', 'green', 'orange', 'silver'     
verColor: 'red',                    

// displays the VERTICAL tracker also on small screen devices if true
verMobile: false,             

// hides the VERTICAL tracker on large screens if true;
// the counterpart for horMobileOnly; only here for completeness, I don't see a reason to actually use this ;)  
verMobileOnly: false,          

 // adds stops for each section to the VERTICAL tracker if true
verStops: true,          

// adds numbers to the stops of the VERTICAL TRACKER if true
// only makes sense if verStops is true      
verNumbering: false,    

// adds the headline (h3) of each section to the VERTICAL tracker if true        
verTitles: true,                

// sets the viewport width below which a device is considered 'small screen' for the rest of the options
mobileThreshold: 1024,        

// if set to true, all headlines (h1, h2, h3 etc.) will be converted to tracker titles (if horTitles/verTitles is also true), if set to false only h3-headlines will be tracked  
trackAllHeadlines: false,   

// adds a final stop to the very end of the progress tracker(s) if true
// only makes sense if horStops and/or verStops is true; works with horNumbering/verNumbering    
addFinalStop: false,    

// adds a title to the final stop at the end of the progress tracker(s) if not ''
// only makes sense if addFinalStop and horTitles/verTitles are true; works without addFinalStop only on the HORIZONTAL tracker and only if horOnlyActiveTitle is true        
finalStopTitle: '',       

// adds a hover effect to the stops if true
// only makes sense if horStops/verStops and/or horTitles/verTitles is true      
hovering: true,              

// clicking on a stop animates the page to that section if true
// only makes sense if horStops/verStops and/or horTitles/verTitles is true   
linking: true,     

// clicking on a stop will scroll to right after the headline if true
// only makes sense if horStops/verStops and/or horTitles/verTitles and linking is true; this setting is automatically applied on small screen devices if horTitles is set to true             
skipHeadlines: false,     

// sets the duration of the scrolling animation in milliseconds; set to 0 to scroll w/o animation
// only makes sense if horStops/verStops and/or horTitles/verTitles and linking is true      
scrollSpeed: 800,  

// if true the tracker(s) show the scroll position based on the BOTTOM of the viewport, if false the TOP of the viewport serves as the basis
// if the tracked area or even it's last section isn't as high (or higher) as the viewport, then the tracker(s) won't reach 100% if this is set to false             
trackViewport: true,

// turns section stops and titles inactive again, when the corresponding section leaves the viewport
trackViewportOnly: false                   

Change log:

v1.2.2 (2016-09-08)

• Once more fixed the calculations

v1.2.1 (2016-09-02)

• Removed superfluous elements
• Automatically adjust the max-width of .spt-centerAll if necessary
• Moved the different color-presets out of the main stylesheet
• Fixed a mistake that occured when the height/padding-top where changed by the user
• Made the positioning values for the horTitlesOffset option dynamic

v1.2 (2016-08-24)

• added new options, made some adjustments and optimizations

2016-08-20

• small fixes

---

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