jQuery Plugin To Auto Update Navigation When The User Scrolls - spotter.js
File Size: | 23.1 KB |
---|---|
Views Total: | 1427 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.