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="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" />

3. Load the jQuery easing plugin for easing effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></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>
</ul>
</nav>
</div>

5. Your page HTML markup should look like this:

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

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

$(function () {
   $('.header').stickyNavbar();
});

7. Available settings with default values.

$(function () {
$('.header').stickyNavbar({

// 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
// http://gsgd.co.uk/sandbox/jquery/easing
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

Website: http://www.jozefbutko.com/stickyNavbar/

Changelogs:

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

2014-09-21

• scrolling bug fix

2014-08-25

• Ignore external links and just let them open fix

2014-05-22

• Inaccurate scrolling fix, animateCSSRepeat Fix

2014-04-10

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