Sticky Navigation With Smooth Scroll And Scroll Spy - jQuery sticky-nav

A multi-purpose jQuery site navigation plugin to create a sticky navigation with smooth scroll and scroll spy functionalities for your single page web application.

Features:

• Sticky navigation. Always keeps the navigation stick to the top of the webpage when scrolling down.
• Scrollspy: Activates menu items on scroll.
• Smooth scroll: Smoothly scroll to page sections on click.

How to use it:

1. Create a header navigation that contains anchor links pointing to the page sections within the document.

<nav>
  <ul>
    <li><a href="#section1">section 1</a></li>
    <li><a href="#section2">section 2</a></li>
    <li><a href="#section3">section 3</a></li>
  </ul>
</nav>

 <section id="section1">
   Section 1
 </section>

 <section id="section2">
   Section 2
 </section>

  <section id="section3">
   Section 3
 </section>

2. Include jQuery library and the JavaScript jquery.sticky-nav.js at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.sticky-nav.js"></script>

3. Initialize the plugin on the header navigation.

$(document).ready(function() {
  $('nav').stickynav();
});

4. Make the header navigatio stick to the top of the webpage using CSS. The plugin automatically adds the class .sticky to the navigation when you scroll down the webpage.

nav {
  background: #000;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}

nav.sticky {
  position: fixed;
}

5. Customize the styles of the activated menu items.

nav ul li a.active {
  background: #ff6e6f;
}

6. All default selectors:

// Selected nav item modifier class
navActiveClass:    'active',     

// Sticky nav modifier class
navStickyClass:    'sticky',       

// Section id, class or tag selector
sectionSelector:   'section'       

Changelog:

v1.1.0 (2018-07-08)

• Add offset 0

---

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