Bootstrap Auto-Hiding Navbar

Github project page Download


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:



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

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 to get notified about the upcoming tools!

Follow us on Facebook or Google+ 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.