stickyNavbar.js
stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor links highlighting
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--><!-- all these references goes before the closing body tag-->
2. HTML Markup
Navigation:
Home About Services Contact
Body markup:
<!-- Your content goes here --> <!-- Your content goes here --> <!-- Your content goes here --> <!-- Your content goes here -->
3. CSS:
Add active
class into your style.css
and style it as you like, eg.:
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:
;
or with the options object:
;
5. Demo
http://www.jozefbutko.com/stickynavbar/ or if you want to play with options: http://jsbin.com/wuluj/4/edit
6. Credits
jQuery
Animate.CSS
jQuery Easing Plugin
Contact
Copyright (C) 2014-2016 Jozef Butko
www.jozefbutko.com
www.github.com/jbutko
@jozefbutko
Changelog
1.3.3
- menuItemsHref incorrect selector causes errors - pull request #45 by @dimaip
14/04/2016
1.3.2
- add support for relative links
04/10/2015
1.3.1
- set keyboard focus improvement - pull request #28 by @theopolisme
- bigger resolutions check by @gyduxa
19/07/2015
1.3.0
- set keyboard focus to selected section after navigation - pull request #26 by @jacktonkin
- allow relative links - pull request #25 by @stebru
06/06/2015
1.2.2
- Improve highlighting of last menu item - pull request #24 by marspe
15/05/2015
1.2.1
- added npm package.json
24/03/2015
1.2.0
- 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
1.1.3
- scrolling bug fix
20/09/2014
1.1.2
- ignore external links and just let them open fix - pull request #15 by @Globegitter
25/07/2014
1.1.1
- just a readme file update
23/07/2014
1.1.0
- 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
1.0.5
- animateCSSRepeat Fix
- Inaccurate scrolling fix
22.05.2014
1.0.4
- Fix of the overlapped content by nav container after first click
- Version number fix to 1.0.4
10.04.2013
1.0.3
- Flickering of CSS animation fix
13.03.2014
1.0.2
- Manifest update
09.03.2014
1.0.1
- stickyNavbar.js.jquery.json update
09.03.2014
1.0.0
- stickyNavbar.js.jquery.json update
09.03.2014