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>

2. 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>

3. Inlucde css & javascript

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

4. 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);
});