Scrolling Sidebar Nav Menu Plugin - scrollNav

scrollNav is a tiny jQuery plugin that allows you to create a sticky scrolling sidebar navigation menu in long web pages. It  grabs your page's existing content and divides it up into logical sections so that your visitors can easily and quickly find the content they want.

How to use it:

1. Include jQuery Library and scrollNav.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./index_files/jquery.scrollNav.min.js"></script>

2. Initialise the plugin

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

3. Create Sidebar Nav

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

4. Content

<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>

5. Available options.

sections: 'h2',
subSections: false,
sectionElem: 'section',
className: 'scroll-nav',
showHeadline: true,
headlineText: 'Scroll To',
showTopLink: true,
topLinkText: 'Top',
fixedMargin: 40,
scrollOffset: 40,
animated: true,
speed: 500,
insertLocation: 'insertBefore',
arrowKeys: false,
scrollToHash: true,
onInit: null,
onRender: null,
onDestroy: null,
onResetPos: null

Change logs:

v2.7.3 (2018-03-20)

• Added BEM-style active classes

v2.7.2 (2018-03-19)

• Fixed grunt:jshint error
• Fixed readme typo
• Replaced andSelf() calls with addBack()
• Updated semver version to fix vulnerability

v2.7.1 (2016-02-19)

• Fixed package.json

v2.7.0 (2016-02-12)

• Add activeClass setting for custom styles
• Add __focused-section when a section is scrolled to

v2.6.0 (2015-02-20)

• Added in-view and active logic to sub-sections

v2.5.0 (2015-01-19)

• Add scrollToHash setting

v2.4.0 (2014-11-14)

• Adds a new resetPos public function for updating the section positions when the page's content changes. Refer to the Readme for more details.

v2.3.1 (2014-10-30)

• Patched an active section bug where no sections were active when a section matched the exact pixel offset calculated

v2.3.0 (2014-10-10)

• Updated min Node to 0.10.*
• Updated all Node plugins to latest
• Added option to change the classname used throughout the plugin.

v2.1.1 (2013-12-14)

• Added scrollNav namespace to event listeners to avoid crashing in to user defined event listeners.

v2.1.0 (2013-12-04)

• Reorganized core to allow for new public methods
• Added destroy method to core to allow for breaking down the plugin and it's dom * changes
• Added the option to add callback functions to init, render and destroy
• Squashed a bug when wrapping sub-sections in their div
• Updated core init in test for easier reuse
• Fixed Grunt test:browser task to only run in the browser
• Added destroy tests to core module and a new module for the callbacks

---

This awesome jQuery plugin is developed by jimmynotjim. For more Advanced Usages, please check the demo page or visit the official website.