scrollNav.js

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

Simple to setup

A single file import and function in your footer and you're on your way.
Fully Customizable

All the styling is up to you and the few bits controled by the plugin are editable
Tiny Size

Damn right it's fast! At 1.8kb min'd, scrollNav is pretty unintrusive.

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.

<script src="jquery.scrollNav.min.js"></script>

Build your page

Include a class or id hook on the element you want to apply the plugin to and include an <h3> for section headings you want to inlcude in the navigation.

<div class="main">
    <article class="post-article">
        <h1 class="post-heading">This is the main heading for the article</h1>
        <h2 class="post-sub-headling">This is a sub-heading for the article</h2>
        <p>Yada yada yada...</p>
        <h3>This is a section heading</h3>
        <p>More yada yada...</p>
        <h3>Another section heading</h3>
        <p>More more yada...</p>
    </article>
</div>

Initialise

Now initialise the plugin with your hook for the article

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

and the plugin scans the article, grabs all the <h3>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 @csswizardry’s inuit.css framework style:

<nav class="scroll-nav">
    <span class="scroll-nav-heading">
    <ol class="scroll-nav-list">
        <li class="scroll-nav-item">
            <a class="scroll-nav-link">

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.

<body class="sn-loading">

turns into

<body class="sn-active">

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 <h3>s within the target article. If your page structure differs, feel free to target another element, like a <h2> or <h4> 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 issue tracker.

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 (@jimmynotjim)

With a bit of guidance from Eric Clemmons (@ericclemmons)

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 Google Web Fonts. Icons are Entypo by Daniel Buce and were packaged using Fontello.

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