Home

Awesome

stickyNavbar.js

stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor links highlighting

Maintainers Wanted

Because I no longer have time to support and maintain this plugin I am looking for developer who would like to take over this project and add new functionality, solve issues etc. You can contact me through my twitter account: @jozefbutko

1. 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:

<!-- this goes inside the header tag-->
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
<!-- all these references goes before the closing body tag-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/stickyNavbar.js@1.3.3/jquery.stickyNavbar.min.js"></script>

2. HTML Markup

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>

Body markup:

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

3. CSS:

Add active class into your style.css and style it as you like, eg.:

.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); // hardware acceleration of CSS animation
}

Note: You can change active class to anything you want and pass your own class into options object of stickyNavbar function. Be sure to add top: 0 to .sticky class if you want your page to be scrolled on top after each page refresh and not to vertical position presents before page refresh.

4. jQuery:

Call stickyNavbar function on the navigation wrapper (.header), 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: 350, // Duration of jQuery animation as well as jQuery scrolling duration
		startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container)
		easing: "swing", // 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 viewport width of 480px (default) or user defined mobileWidth
		mobileWidth: 480, // The viewport width (without scrollbar) under which stickyNavbar will not be applied (due user usability on mobile)
		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
	});
});

5. Demo

https://www.jozefbutko.com/stickynavbar/ or if you want to play with options: http://jsbin.com/wuluj/4/edit

6. Credits

jQuery<br> Animate.CSS<br> jQuery Easing Plugin

Contact

Copyright (C) 2014-2019 Jozef Butko<br> www.jozefbutko.com<br> www.github.com/jbutko<br> @jozefbutko

Changelog

1.3.5

1.3.4

1.3.3

1.3.2

1.3.1

1.3.0

1.2.2

1.2.1

1.2.0

1.1.3

1.1.2

1.1.1

1.1.0

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0