Dynamic-Scrollspy
by Michael Tallino @psalmody
jQuery plugin to dynamically generate a .nav
outline and setup Bootstrap scrollspy.
Bootstrap 4 works now - see notes at the end on how to use it.
Installation
Include Bootstrap 3+ or 4+ and jQuery 1.11+ or 2.0+ or 3.0+.
Download from GitHub Project Page or:
Bower:
bower install dynamic-scrollspy
NPM:
npm install dynamic-scrollspy
Include:
Usage
Basic usage: setup a div or nav area to put the auto-generated nav outline in.
Requires all H1 - H6 tags live at the same DOM level.
;
Options
Options may be specified at time of initiation:
Destroy / Rebuild
Destroy with:
;
Or just refresh by calling again. Settings will be saved from first call unless overriden at this time:
;
Horizontal Nav scrollspy
It is possible to use this package for a top/bottom navbar style scrollspy.
See /tests/horizontal.html
for an example. Mainly, settings would require changes:
CSS - Bootstrap 3
Some example CSS for styling a right-side list (like on Bootstrap's docs pages) Also see /tests/basic.html
.
/* nav *//* all anchors *//* first level *//* second *//* third *//* fourth *//* fifth *//* active link *//* hide second level lists *//* show second-level when active */
Bootstrap 4
Affix doesn't exist in Bootstrap 4. You'll need some extra CSS to make things work:
/* Bootstrap 4 Differences */#scrollspy>ul.nav { /* for affix if wanted */ position: fixed; /* vertical orientation */ flex-direction: column;}/* bootstrap 4 puts the scrollspy .active on the <a> instead of the <li> item */.nav>li>a.active { font-weight: bold; border-left: 2px solid gray;}/* need to see the child <ul> */.nav-link.active+ul.nav.child { display: block;}
Contributing
Feel free! Fork it, create a branch, etc.