jQuery Plugin To Auto Update Menu States When Scrolling - menuOnScroll

menuOnScroll is a small jQuery plugin designed for single page website / web application that detects the scroll position relative to the viewport and adds an active state (CSS class) to the navigation menu indicating the current position.

How to use it:

1. Load jQuery library and the jQuery menuOnScroll plugin in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.menuOnScroll.js"></script>

2. Create a navigation menu that contains anchor links pointing to the content sections in your singe page website. Clicking on the anchor links will scroll the page to specified sections with a smooth scroll animation.

<ul id="menu">
  <li class="menu-item"><a href="#home">Home</a></li>
  <li class="menu-item"><a href="#about">About</a></li>
  <li class="menu-item"><a href="#contact">Contact</a></li>
</ul>

<div class="container">
  <div id="home"><h2>Home</h2></div>
  <div id="about"><h2>About</h2></div>
  <div id="contact"><h2>Contact</h2></div>
</div>

3. Active the plugin.

$("#menu").menuOnScroll();

4. Options and defaults.

// The class that attaches to the menu item when it's active.
menuActiveClass: "active",

// The class name of the menu item.
menuSelector: ".menu-item",

// The offset value of footer (if has one).
footerOffset: 0,

// The height of the fixed header
headerOffset: 0,

// The offset value used for scroll to element when the menu item is clicked.
scrollOnClickOffset: 20

---

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