scrollNav is a light jQuery plugin that grabs your page's existing content, divides it up into logical sections and builds a customizable scrolling sidebar navigation. Scroll this page and watch it follow along w/ you.

Features

Usage

Import

Start by importing the script to your page, the best location is in the footer, but no matter what, make sure it follows your jquery file.

Build your page

Include a class or id hook on the element you want to apply the plugin to and include an

for section headings you want to inlcude in the navigation.


    

        
This is the main heading for the article

        
This is a sub-heading for the article

        
Yada yada yada...

        
This is a section heading

        
More yada yada...

        
Another section heading

        
More more yada...

Initialise

Now initialise the plugin with your hook for the article

$('.post-article').scrollNav();

and the plugin scans the article, grabs all the

s, adds them to the navigation list and inserts the list before the article. It’s that easy…well almost.

Styling

To keep the plugin simple there are no styles added to the navigation, that’s all up to you. The nav structure looks like this and includes class names in inuit.css framework style:

There are also loaded and loading hooks added to the body element (similar to how Typekit handles font loading) to allow for css transitions or any other changes in css you’d need.


      

      
turns into

      

      

      

      
Options

      
There are a few customizable options in scrollNav using key : value pairs. Here are the defaults.

      

      
$('.post-article').scrollNav({
    sections: 'h3',
    titleText: 'Scroll To',
    fixedMargin: 40,
    animated: true
});


      

      
Sections

      
As mentioned, the script automatically searches for 
s within the target article. If your page structure differs, feel free to target another element, like a 
 or 
 or even a class, like .scroll-headline.

      
Title Text

      
scrollNav’s default title text is ‘Jump To’, but feel free to change it to whatever works for you, like ‘Article Sections’ or ‘Page Navigation’

      
Fixed Margin

      
This is the top dimension you set for the .scroll-nav.fixed class, which is applied as the user scrolls down the page and is removed as they scroll above the article. You definitely want to set this if you don’t use the default 40px, otherwise the nav will jump around as the user scrolls past the top of the article.

      
Animated Scrolling

      
The plugin animates the page scroll when clicking on a nav link by default. Set this to false if you do not wish to animate the scroll.

      
Errors

      
The plugin will refuse to build and log an error message if it doesn’t find your desired container or any sections within the container. If the nav doesn’t show up on load, check your browser’s console.

      
Issues

      
There are a few known issues, including poor location updating when scrolling on touch devices. If you find any others please submit them to the .

      
License

      
scrollNav is released under the CC Attribution-ShareAlike license. This means you can recreate, edit or share the plugin as long as you maintain the same open licensing.

      
Authors

      
Written by James Wilson  

      
With a bit of guidance from Eric Clemmons  

      
Colophon

      
The scrollNav logo is set in Alfa Slab One by JM Solé. Body text and headlines are set in Open Slab by Steve Matteson. Both are delivered using . Icons are Entypo by Daniel Buce and were packaged using Fontello.

      
This demo is hosted and powered by  through , built using Sublime Text 2, Codekit, and Anvil utilizing standard html5, jQuery and SCSS with the ResponsableCSS framework.