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

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

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>

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>

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.

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
	});
});

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

jQuery
Animate.CSS
jQuery Easing Plugin

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

• missing single quote fix 15/01/2019

• support for relative links in navigation links 20/10/2016

• menuItemsHref incorrect selector causes errors - pull request #45 by @dimaip
  14/04/2016

• add support for relative links
  04/10/2015

• set keyboard focus improvement - pull request #28 by @theopolisme
  
• bigger resolutions check by @gyduxa
  19/07/2015

• set keyboard focus to selected section after navigation - pull request #26 by @jacktonkin
  
• allow relative links - pull request #25 by @stebru
  06/06/2015

• Improve highlighting of last menu item - pull request #24 by marspe
  15/05/2015

• added npm package.json
  24/03/2015

• new scrolling logic
  
• fix: conditional checking if the selector option is an 'li' then get the child's href attribute - pull request #21 by @dbrw
  21/03/2015

• scrolling bug fix
  20/09/2014

• ignore external links and just let them open fix - pull request #15 by @Globegitter
  25/07/2014

• just a readme file update
  23/07/2014

• stickyMode/unstickyMode class added
• custom mobileWidth for turning off stickyNavbar
• window.outerWidth(true) changed to window.width() according to jQuery docs
• optional z-index setting
• added animation duration and easing for scrolling
• bottomAnimation option removed (unstable behaviour)
• navOffset option removed (unstable behaviour)
• credits for feature requests/points: @Phyxion, @oniric85, @coolboy4598
  23/07/2014

• animateCSSRepeat Fix
  
• Inaccurate scrolling fix
  22.05.2014

• Fix of the overlapped content by nav container after first click
  
• Version number fix to 1.0.4
  10.04.2013

• Flickering of CSS animation fix
  13.03.2014
  

• Manifest update
  09.03.2014

• stickyNavbar.js.jquery.json update
  09.03.2014

• stickyNavbar.js.jquery.json update
  09.03.2014