Download the source code here, and follow two simple steps as below. That is it!
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>
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>
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.
Type: String
Default: "active"
The class that attaches to the menu item when it's active.
Type: Class Selector
Default: ".menu-item"
The class name of the menu item.
Type: Number
Default: 0
The height of the fixed header
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.
Type: Number
Default: 20
The offset value used for scroll to element when the menu item is clicked.