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:

<script type="text/javascript" src="build/dynamicscrollspy.min.js"></script>

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.

$('#somediv').DynamicScrollspy();

Options

Options may be specified at time of initiation:

$('#somediv').DynamicScrollspy({
  affix: true, //affix by default, doesn't work on Bootstrap 4
  tH: 2, //lowest-level header to be included (H2)
  bH: 6, //highest-level header to be included (H6)
  exclude: false, //exclude from the tree/outline any H tags matching this jquery selector
  genIDs: false, //generate random IDs for headers?
  offset: 100, //offset from viewport top for scrollspy
  ulClassNames: 'hidden-print', //add this class to top-most UL
  activeClass: '', //active class (besides .active) to add to LI
  testing: false //if testing, append heading tagName and ID to each heading
})

Destroy / Rebuild

Destroy with:

$('#somediv').DynamicScrollspy('destroy');

Or just refresh by calling again. Settings will be saved from first call unless overriden at this time:

$('#somediv').DynamicScrollspy();

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:

$('#somediv').DynamicScrollspy({
  affix: false, //needs to be false, instead setup navbar with affix if needed
  ulClassNames: 'navbar-nav', //the #somediv should be the navbar-collapse div
  tH: 2, //this is the default anyway
  bH: 2 //likely need to limit to one level of H* tags so the nav isn't unweildy
})

CSS - Bootstrap 3

Some example CSS for styling a right-side list (like on Bootstrap's docs pages) Also see /tests/basic.html.

/* nav */
.nav {
  padding-left: 0px;
}
/* all anchors */
.nav > li > a {
  padding: 3px;
  border-left: 0px rgba(0,0,0,0);
}
/* first level */
.nav li >  a {
  padding-left: 10px;
}
/* second */
.nav .nav li >  a {
  padding-left: 20px;
  font-size:.9em;
}
/* third */
.nav .nav .nav li >  a {
  padding-left: 30px;
  font-size:.8em;
}
/* fourth */
.nav .nav .nav .nav li >  a {
  padding-left: 40px;
}
/* fifth */
.nav .nav .nav .nav .nav li >  a {
  padding-left: 50px;
}
/* active link */
li.active > a {
  font-weight:bold;
  border-left: 2px solid gray;
}
/* hide second level lists */
.nav .nav {
  display:none;
}
/* show second-level when active */
.nav > .active > .nav {
  display: block;
}

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.