Fancy jQuery Sticky Navigation with CSS3 Animations - stickyNavbar.js

File Size: 41.2 KB
Views Total: 12288
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fancy jQuery Sticky Navigation with CSS3 Animations - stickyNavbar.js

stickyNavbar.js is a jQuery plugin that makes your navigation stay on top of the window and help you navigate on your one page website with help of smart anchor link highlighting. As a bonus it makes use of the power of Animate.CSS library and jQuery animation effects to improve user experience.

Basic Usage:

1. Load the latest version of jQuery library and stickyNavbar.js script in the html document.

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

2. Load the optional Animate.css for CSS3 animations.

<link href="//" rel="stylesheet" />

3. Load the jQuery easing plugin for easing effects.

<script src="//"></script>

4. Add links to your navigation items with anchor tags pointing to corresponding div section with the same id attribute.

<div id="header">
<nav id="nav">
<ul class="nav navbar-nav">
<li> <a href="#home">Home</a> </li>
<li> <a href="#about">About</a> </li>
<li> <a href="#services">Services</a> </li>
<li> <a href="#contact">Contact</a> </li>

5. Your page HTML markup should look like this:

<div id="home" class="scrollto">
    <!-- Your content goes here -->
<div id="about" class="scrollto">
    <!-- Your content goes here -->
<div id="services" class="scrollto">
    <!-- Your content goes here -->
<div id="contact" class="scrollto">
    <!-- Your content goes here -->

6. Call the plugin on the navigation element you just created.

$(function () {

7. Available settings with default values.

$(function () {

// Class to be added to highlight nav elements
activeClass: 'active', 

// Class of the section that is interconnected with nav links
sectionSelector: 'scrollto', 

// Duration of jQuery animation as well as jQuery scrolling duration
animDuration: 350, 

// Stick the menu at XXXpx from the top of the this() (nav container)
startAt: 0, 

// Easing type if jqueryEffects = true, 
// use jQuery Easing plugin to extend easing types
easing: 'swing', 

// AnimateCSS effect on/off
animateCSS: true, 

// Repeat animation everytime user scrolls
animateCSSRepeat: false, 

// AnimateCSS class that will be added to selector
cssAnimation: 'fadeInDown', 

// jQuery animation on/off
jqueryEffects: false, 

// jQuery animation type: fadeIn, show or slideDown
jqueryAnim: 'slideDown', 

// Selector to which activeClass will be added, 
// either 'a' or 'li'
selector: 'a', 

// If false, nav will not stick under viewport width of 480px (default) or user defined mobileWidth
mobile: false, 

// The viewport width (without scrollbar) under which stickyNavbar will not be applied (due user usability on mobile)
mobileWidth: 480, 

// The zindex value to apply to the element: default 9999, other option is 'auto'
zindex: 9999, 

// Class that will be applied to 'this' in sticky mode
stickyModeClass: 'sticky', 

// Class that will be applied to 'this' in non-sticky mode
unstickyModeClass: 'unsticky' 


About author:

Author: Jozef Butko



v1.3.5 (2019-01-15)

  • Update jquery.stickyNavbar.js

v1.3.4 (2016-10-21)

  • support for relative links in navigation links

v1.3.3 (2016-04-15)

  • BUGFIX: menuItemsHref incorrect selector causes errors

v1.3.1 (2015-07-19)

  • set keyboard focus improvement, bigger resolutions check

v1.3.0 (2015-06-06)

  • set keyboard focus to selected section after navigation
  • allow relative links

v1.2.2 (2015-05-16)

  • Improve highlighting of last menu item

v1.2 (2015-03-22)

  • new scrolling logic
  • fix: conditional checking if the selector option is an 'li' then get the child's href attribute


  • scrolling bug fix


  • Ignore external links and just let them open fix


  • Inaccurate scrolling fix, animateCSSRepeat Fix


  • Fix of the overlapped content by nav container after first click

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