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/[email protected]/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