Just look at the navbar and play with the scrollbar of the page ;)
You only have to include the source javascript file and then initialize it with the following code:
<script>$("div.navbar-fixed-top").autoHidingNavbar();</script>
When calling $(".navbar-fixed-top").autoHidingNavbar() you can pass a parameters object with zero or more of the following:
| Option | Default | Description |
|---|---|---|
disableAutohide |
false |
Set this to true if you want to show/hide the navbar programmatically. |
showOnUpscroll |
true |
The navbar shows up when scrolling the page upwards (when set to false then it shows only when scroll is on page's top). |
showOnBottom |
true |
The navbar shows up when scroll reaches the page's end. |
hideOffset |
'auto' |
Hides the navbar after scrolling that much pixel. auto means the navbar's height. |
animationDuration |
200 |
The duration of the show and hide animations in milliseconds. |
Here are the available methods that can be called with the following syntax:
$('.navbar-fixed').autoHidingNavbar('setDisableAutohide', true);
$('.navbar-fixed').autoHidingNavbar('hide');
| Method | Description |
|---|---|
setDisableAutohide(value) |
Call to change the `disableAutohide` parameter. |
setShowOnUpscroll(value) |
Call to change the `showOnUpscroll` parameter. |
setShowOnBottom(value) |
Call to change the `showOnBottom` parameter. |
setHideOffset(value) |
Call to change the `hideOffset` parameter. |
setAnimationDuration(value) |
Call to change the `animationDuration` parameter. |
show() |
Shows the navbar programmatically. |
hide() |
Hides the navbar programmatically |
destroy() |
Destroys the plugin instance. |
Download from github. Please report issues and suggestions to github's issue tracker or contact me on g+ or twitter!
Follow us on LinkedIn to get notified about the upcoming tools, and feel free to share your thoughts with us! We welcome any jQuery/Bootstrap plugin suggestions which can help you and the others.
Like this plugin, have a question or just want to say hello? Feel free to leave a comment below.