bootstrap-scrollspy-progress
js Styles
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
<script type="module"> import bootstrapScrollspyProgress from 'https://cdn.jsdelivr.net/npm/bootstrap-scrollspy-progress@1.0.0/+esm' </script>
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
- 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>
- 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>
- Inlucde css & javascript
<link rel="stylesheet" href="css/scrollspy-progress.min.css"> <!-- head -->
<script src="js/scrollspy-progress.min.js"></script> <!-- before /body -->
- 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);
});