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

File Size: 230 KB
Views Total: 6762
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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'       


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.