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

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