jQuery Plugin To Auto Update Navigation When The User Scrolls - spotter.js

spotter.js is a flexible, cross-device jQuery plugin which automatically updates the CSS active state of matched menu when the user scrolls the page to a certain content.

Basic Usage:

1. Load the jQuery library and the spotter.js script at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.spotter.js"></script>

2. Create a navigation menu with anchor links pointing to the sectioned content.

<ul class="nav-demo">
  <li><a href="#content1">Content Section 1</a></li>
  <li><a href="#content2">Content Section 2</a></li>
  <li><a href="#content3">Content Section 3</a></li>
  <li><a href="#content4">Content Section 4</a></li>
  <li><a href="#content5">Content Section 5</a></li>
</ul>

3. Create a list of content sections.

<ul class="content-wrapper">
  <li id="content1">
    Content 1
  </li>
  <li id="content2">
    Content 2
  </li>
  <li id="content3">
    <h2>Wrapper-A Content 3</h2>
    Content 3
  </li>
  <li id="content4">
    Content 4
  </li>
  <li id="content5">
    Content 5
  </li>
</ul>

4. Initialize the plugin and set the CSS active state for the navigation menu.

$(".nav-demo li").spotter({
  menuListClass: "active",
  contentList: ".content-wrapper li"
});

5. Style the active state for the navigation menu whatever you like.

.nav-demo li.active { ... }

6. All the default settings.

// css active state for the matching menu when scrolled into a content
// must be a string of css selector
menuList: "",

// the menus (needs to be defined only when this.selector throws an error in jQuery)
// must be a string of one or more space separate class names
menuListClass: "",

// the contents
// must be a string of css selector
contentList: "",

// specify scroll container (where scroll event is bound) for the contents; 
// it cannot be an iframe

// must be a string of css selector
scrollContainer: "window",

// if true, it tells jquery.spotter to match the href value in <a> inside <li> 
// inside the menu to the id value in <li> for the content at detection
// must be a boolean
matchByHash: false,

// tells browser to update the matching menu after an delay
// must be a positive integer indicating time in ms
delay: 80,

indexScrollEvt: 0,
indexResizeEvt: 0,
pluginEnabled: true

---

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