1.0.0 • Published 7 years ago
bootstrap-scrollspy-progress v1.0.0
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);
});
1.0.0
7 years ago