bootstrap-scrollspy-progress

Bootstrap Scrollspy Vertical Progress Bar

Simple jQuery plugin for adding vertical progress bar to Bootstrap's spyscroll, with support for sections with different heights.

Demo

See demo here

Installation

Usage

1. Add sections to your page, or you can even use div containers with class.

<section id="one"></section>
<section id="two"></section>
<section id="three"></section>

1. Add spyscroll progress to your page

<div id="scrollspy-container">
  <div id="scrollspy-progress" class="list-group">
    <a class="list-group-item" href="#one"></a>
    <a class="list-group-item" href="#two"></a>
    <a class="list-group-item" href="#three"></a>
        
    <div class="progress"><div class="fill"></div></div>
  </div>
</div>

1. Inlucde css & javascript

<link rel="stylesheet" href="css/scrollspy-progress.min.css"> <!-- head -->
<script src="js/scrollspy-progress.min.js"></script> <!-- before /body -->

1. Init Spyscroll progress

$('#scrollspy-progress').scrollSpyProgress();

Options

Key	Type	Default	Example	Description
sections	string	'section'	'div.section'	Selector for custom sections containers, used when you have multiple sections on the page or you are using div for your sections with a class.

Bonus - Add scroll animation

$('#scrollspy-progress').find('a').click(function(event) {
  event.preventDefault();
  var elem_id = $(this).attr('href');
  var move_to = $(elem_id).offset().top;
  $('html, body').animate({ scrollTop: move_to }, 800);
});