One Page Scroll Site Navigation Plugin With jQuery

File Size: 16.5 KB
Views Total: 5923
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
One Page Scroll Site Navigation Plugin With jQuery

A jQuery plugin for creating a sticky site navigation for one page scrolling website or single page web app.

It keeps track of page scroll events and applies custom styles to Active nav items, which we've called Scrollspy.

How to use it:

1. Create a site navigation from an HTML unordered list.

<div class="nav-wrap">
  <ul id="onepage-nav">
    <li><a class="scroll" href="#home">Home</a></li>
    <li><a class="scroll" href="#about">About</a></li>
    <li><a class="scroll" href="#contact">Contact</a></li>
  </ul>
</div>

2. Create corresponding content sections as follows:

<div id="home" class="section">
  Home Section
</div>
<div id="about" class="section">
  About Section
</div>
<div id="more" class="section">
  More Section
</div>

3. Stick the site navigation to the top of the page while scrolling.

.nav-wrap {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

4. Apply your CSS styles to the active menu items.

#onepage-nav li a.scroll.active{
  /* custom styles here */
}

5. Include the onepageNav.js script after jQuery but before the closing body tag.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/onepageNav.js"></script>

6. Initialize the plugin and specify the selector of the site navigation.

jQuery('.scroll').onePgaeNav({
  wrapper: '#onepage-nav'
});

7. Override the default Active CSS class. Default: 'active'.

jQuery('.scroll').onePgaeNav({
  wrapper: '#onepage-nav',
  activeClass: 'my-css-class',
});

8. Customize the duration of the animation (smooth scroll). Default: 900.

jQuery('.scroll').onePgaeNav({
  wrapper: '#onepage-nav',
  speed: 1000,
});

9. Determine at which position the plugin should applies or remove the Active CSS class.

jQuery('.scroll').onePgaeNav({
  wrapper: '#onepage-nav',
  navStop: 100,  
  navStart: 200,
});

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