Fork me on GitHub

stickyNavbar.js

Fancy sticky navigation jQuery plugin with smart anchor link highlighting

stickyNavbar.js is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling. It could stop right here but stickyNavbar.js offers more: you can use your favourite jQuery effects or even fantastic Animate.CSS library to spice up your navigation. The plugin offers lot of options to suit everyone's needs.
Found a bug or need a help? Open an issue on github.
Developed and maintained by Jozef Butko under MIT Licence.

Scroll down under the navigation bar to see stickyNavbar.js in action!

1. Download

As a first step download stickyNavbar.js from GitHub:

Download on GitHub

Or get the package from Bower:

				 bower install stickyNavbar.js

Or clone the repo:

				 git clone https://github.com/jbutko/stickyNavbar.js.git

2. Setup

Include reference to jQuery library, jQuery easing plugin (optional), animate.CSS (optional, not working in < IE9) and stickyNavbar itself at the bottom of the page before the closing body tag:

				
				
				
				
				
				
			

3. HTML Markup

To properly use stickyNavbar.js setup an usual HTML markup for the navigation:

			<div id="header" class="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>

The most important part here are the href attributes of the anchor tags. They should point to corresponding div section with the same id attribute.
Thanks to this every navigation link will be highlighted as soon as corresponding section hits the bottom of the navigation wrapper.
Also add scrollto class to every div section so the script can recognize which href attribute belongs to which div. You can choose your own class title instead of scrollto in the options object.
Your page HTML markup should looks like this:

				

4. CSS

The styling of the navigation wrapper, ul and li elements is really up to you. In fact there is really only one style needed in your CSS:

			.active {
			    color: #fff !important;
			    text-decoration: underline !important;
			    -webkit-transform: translate3d(0, 0, 0);
			    -moz-transform: translate3d(0, 0, 0);
			    -o-transform: translate3d(0, 0, 0);
			    -ms-transform: translate3d(0, 0, 0);
			    transform: translate3d(0, 0, 0);
			}

This ensures the highlighting of the active class. transform: translate3d(0, 0, 0) is a hack that triggers hardware acceleration during CSS3 animations.

5. jQuery

Call stickyNavbar function on the navigation wrapper, nav tag or ul tag either without options object:

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

or with the options object:

			$(function () {
				$('.header').stickyNavbar({
				activeClass: "active",			// Class to be added to highlight nav elements
				sectionSelector: "scrollto",	// Class of the section that is interconnected with nav links
				animDuration: 250,				// Duration of jQuery animation
				startAt: 0,						// Stick the menu at XXXpx from the top of the this() (nav container)
				easing: "linear",				// Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
				animateCSS: true,				// AnimateCSS effect on/off
				animateCSSRepeat: false,		// Repeat animation everytime user scrolls
				cssAnimation: "fadeInDown",		// AnimateCSS class that will be added to selector
				jqueryEffects: false,			// jQuery animation on/off
				jqueryAnim: "slideDown",		// jQuery animation type: fadeIn, show or slideDown
				selector: "a",					// Selector to which activeClass will be added, either "a" or "li"
				mobile: false,					// If false nav will not stick under 480px width of window
				mobileWidth: 480,				// The viewport width (without scrollbar) under which stickyNavbar will not be applied (due usability on mobile devices)
				zindex: 9999,					// The zindex value to apply to the element: default 9999, other option is "auto"
				stickyModeClass: "sticky",		// Class that will be applied to 'this' in sticky mode
				unstickyModeClass: "unsticky"	// Class that will be applied to 'this' in non-sticky mode
			  });
			});

6. Default Options

activeClass: "active"

Class to be added to highlight nav elements

sectionSelector: "scrollto"

Class of the section that is interconnected with nav links

navOffset: 0

Deprecated since version v1.1.0

Offset from the default position of this() (nav container)

animDuration: 250

Duration of jQuery animation

startAt: 0

Stick the menu at XXXpx from the top of the this() (nav container)

easing: "linear"

Easing type. Effective if jqueryEffects: true, use jQuery Easing plugin to extend easing types

animateCSS: true

AnimateCSS effect on/off

animateCSSRepeat: false

Repeats animation everytime user scrolls

bottomAnimation: false

Deprecated since version v1.1.0

CSS animation on/off in case we hit the bottom of the page

cssAnimation: "fadeInDown"

AnimateCSS animation type

jqueryEffects: false

jQuery animation on/off

jqueryAnim: "slideDown"

jQuery animation type: fadeIn, show or slideDown

selector: "a"

Selector to which activeClass will be added, either a or li

mobile: false

If set to false this() will not stick under 480px width of window. This is due to usability on smaller mobile screen sizes.

mobileWidth: 480

NEW! since v.1.1.0

The viewport width (without scrollbar) under which stickyNavbar will not be applied (due usability on mobile devices).

zindex: 9999

NEW! since v.1.1.0

The zindex value to apply to the element: default 9999, other option is "auto".

stickyModeClass: "sticky"

NEW! since v.1.1.0

Class that will be applied to 'this' in sticky mode.

unstickyModeClass: "unsticky"

NEW! since v.1.1.0

Class that will be applied to 'this' in non-sticky mode.

7. Examples

If you want to try tinkering with options please follow the link on jsbin.com.

In the Wild

idea-art.com
www.gjdc.org/center.html

Contact

Copyright © 2014 Jozef Butko
www.jozefbutko.com
www.github.com/jbutko
@jozefbutko