One Page Scroll Navigation Bar With jQuery - scroll-navigation

A small jQuery plugin to create a navigation bar for your one page scrolling website that automatically highlights the active nav link according to current scroll position (AKA Scroll Spy).

How to use it:

1. Create a navigation bar for your one page scrolling website.

<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs" class='nav'>
    <li><a href="#i1" class="scrollNav-links scrollNav-active">Item 1</a></li>
    <li><a href="#i2" class="scrollNav-links " >Item 2</a></li>
    <li><a href="#i3" class="scrollNav-links ">Item 3</a></li>
    <li><a href="#i4" class="scrollNav-links ">Item 4</a></li>
  </ul>
</div>

2. Create the sectioned content as follows:

<div id="container" class="scrollNavData">
  <div id="i1" class="scrollNav-content">
    <h2>Item 1</h2>
    <p>...</p>
  </div>
  <div id="i2" class="scrollNav-content">
    <h2>Item 2</h2>
    <p>...</p>
  </div>
  <div id="i3" class="scrollNav-content">
    <h2>Item 3</h2>
    <p>...</p>
  </div>
  <div id="i4" class="scrollNav-content">
    <h2>Item 4</h2>
    <p>...</p>
  </div>
</div>

3. Put jQuery JavaScript library and the scroll-navigation.js at the bottom of the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="scroll-navigation.js"></script>

4. Initialize and activate the navigation bar.

var s = new scrollNav();
s.init();

5. Apply your own styles to the highlighted nav links.

.scrollNav-active {

  color: red;

}

---

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