Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jbutko/stickyNavbar.js
stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting
https://github.com/jbutko/stickyNavbar.js
jquery navigation
Last synced: 3 months ago
JSON representation
stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting
- Host: GitHub
- URL: https://github.com/jbutko/stickyNavbar.js
- Owner: jbutko
- License: mit
- Created: 2014-03-08T21:14:21.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T01:38:29.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T13:11:13.185Z (7 months ago)
- Topics: jquery, navigation
- Language: JavaScript
- Homepage: https://www.jozefbutko.com/stickynavbar/
- Size: 487 KB
- Stars: 284
- Watchers: 18
- Forks: 64
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://twitter.com/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:
```html
```
## 2. HTML Markup
Navigation:
```html
```
Body markup:
```html
```
## 3. CSS:
Add `active` class into your `style.css` and style it as you like, eg.:
```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); // 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:
```javascript
$(function () {
$('.header').stickyNavbar();
});
```
or with the options object:
```javascript
$(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](http://api.jquery.com/)
[Animate.CSS](http://daneden.github.io/animate.css/)
[jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/)
## Contact
Copyright (C) 2014-2019 Jozef Butko
[www.jozefbutko.com](https://www.jozefbutko.com)
[www.github.com/jbutko](https://www.github.com/jbutko)
[@jozefbutko](https://www.twitter.com/jozefbutko)
## Changelog
### 1.3.5
- missing single quote fix
15/01/2019
### 1.3.4
- support for relative links in navigation links
20/10/2016
### 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