menuOnScroll

A jQuery plugin that automatically updates navigation when scrolling

Installation

Download the source code here, and follow two simple steps as below. That is it!

Javascript

Include jQuery 1.8+ and the menuOnScroll plugin either in the footer or header of your website.

You can then initialize the plugin right after the document is ready.

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.menuOnScroll.js"></script>
<script>
  $(document).ready(function() {
    $("#menu").menuOnScroll();
  });
</script>
          

HTML

You have full control of what element you want to use for this plugin. However, it's designed specifically for the navigation of one-page website. Like this site!

<ul id="menus">
  <li class="menu-item">
    <a href="#introduction">Introduction</a>
  </li>
  <li class="menu-item">
    <a href="#installation">Installation</a>
  </li>
</ul>

<div id="container">
  <div id="introduction">...</div>
  <div id="installation">...</div>
</div>
        

Options

The plugin requires no extra configuration if you follow the HTML markup above. However, it still offers the flexibility that you can configure to meet your requirements.

menuActiveClass

Type: String
Default: "active"

The class that attaches to the menu item when it's active.

menuSelector

Type: Class Selector
Default: ".menu-item"

The class name of the menu item.

headerOffset

Type: Number
Default: 0

The height of the fixed header

footerOffset

Type: Number
Default: 0

The offset value of footer (if has one), this is used when you want last menu item become active when the page hits the bottom.

scrollOnClickOffset

Type: Number
Default: 20

The offset value used for scroll to element when the menu item is clicked.