stickyNavbar.js

Fancy sticky navigation jQuery plugin with smart anchor links 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:

				 Downlod links goes here:
			

Or get the package from Bower:

				 bower install stickyNavbar
			

2. Setup

Include reference to jQuery library, jQuery easing plugin (optional), animate.CSS (optional) 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"> <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 navOffset: 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 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 bottomAnimation: false, // CSS animation on/off in case we hit the bottom of the page 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" }); });
			

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

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

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

Contact

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