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!
As a first step download stickyNavbar.js from GitHub:
Or get the package from Bower:
bower install stickyNavbar.js
Or clone the repo:
git clone https://github.com/jbutko/stickyNavbar.js.git
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:
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:
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.
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
});
});
Class to be added to highlight nav elements
Class of the section that is interconnected with nav links
Offset from the default position of this() (nav container)
Duration of jQuery animation
Stick the menu at XXXpx from the top of the this() (nav container)
Easing type. Effective if jqueryEffects: true, use jQuery Easing plugin to extend easing types
AnimateCSS effect on/off
Repeats animation everytime user scrolls
CSS animation on/off in case we hit the bottom of the page
AnimateCSS animation type
jQuery animation on/off
jQuery animation type: fadeIn, show or slideDown
Selector to which activeClass will be added, either a or li
If set to false this() will not stick under 480px width of window. This is due to usability on smaller mobile screen sizes.
The viewport width (without scrollbar) under which stickyNavbar will not be applied (due usability on mobile devices).
The zindex value to apply to the element: default 9999, other option is "auto".
Class that will be applied to 'this' in sticky mode.
Class that will be applied to 'this' in non-sticky mode.
If you want to try tinkering with options please follow the link on jsbin.com.
Copyright © 2014-2018 Jozef Butko
www.jozefbutko.com
www.github.com/jbutko
@jozefbutko