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

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.


  • 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.

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

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

<script src="" 
<script src="js/jquery.sticky-nav.js"></script>

3. Initialize the plugin on the header navigation.

$(document).ready(function() {

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 {
  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'       

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

  • Publication date: 29.06.2018
  • Source