bootstrap-scrollspy-progress

vstruhar
js Styles
bootstrap-scrollspy-progress JS library on npm Download bootstrap-scrollspy-progress JS library

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

Version 1.0.0 License ISC
bootstrap-scrollspy-progress has no homepage
bootstrap-scrollspy-progress JS library on GitHub
bootstrap-scrollspy-progress JS library on npm
Download bootstrap-scrollspy-progress JS library
INSTALL
Type:
<script type="module"> import bootstrapScrollspyProgress from 'https://cdn.jsdelivr.net/npm/bootstrap-scrollspy-progress@1.0.0/+esm' </script>
Learn more

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