jQuery Bootstrap Auto-Hiding Navbar

Download   Demo

Bootstrap Auto-Hiding Navbar is an extension for Bootstrap’s fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.

Usage

1. Download the latest tag from the releases page or get it via bower:

$ bower install bootstrap-autohidingnavbar

1. Include jQuery and Bootstrap:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

1. Include plugin’s code:

<script src="dist/jquery.bootstrap-autohidingnavbar.min.js"></script>

1. Call the plugin:

$(".navbar-fixed-top").autoHidingNavbar(
 // see next for specifications
);

Specifications

Initialization parameters object

When calling $(".navbar-fixed-top").autoHidingNavbar() you can pass a parameters object with zero or more of the following:

• disableAutohide, defaults to false, set this to true if you want to show/hide the navbar programmatically.


• showOnUpscroll, defaults to 'true', the navbar shows up when scrolling the page upwards (otherwise it shows only when scroll is on page’s top).


• showOnBottom, defaults to 'true', the navbar shows up when scroll reaches the page’s end.


• hideOffset, defaults to 'auto', hides the navbar after scrolling that much pixel. Auto means the navbar’s height.


• animationDuration, defaults to '200', is the duration of the show and hide animations in milliseconds.

Methods

You can modify the behavior and aspect of the plugin by calling its methods, most of them accepts a value.

To call methods on the auto hiding instance, use the following syntax:

$(selector).autoHidingNavbar(methodName, parameter);

Here are the available methods:

• setDisableAutohide(value) to change the disableAutohide parameter.


• setShowOnUpscroll(value) to change the showOnUpscroll parameter.


• setShowOnBottom(value) to change the showOnBottom parameter.


• setHideOffset(value) to change the hideOffset parameter.


• setAnimationDuration(value) to change the animationDuration parameter.


• show() to show the navbar programmatically.


• hide() to hide the navbar programmatically.


• destroy() destroys the plugin instance.

Structure

The basic structure of the project is given in the following way:

├── demo/
│ └── index.html
├── dist/
│ ├── jquery.bootstrap-autohidingnavbar.js
│ └── jquery.bootstrap-autohidingnavbar.min.js
├── src/
│ └── jquery.bootstrap-autohidingnavbar.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bootstrap-autohidingnavbar.jquery.json
├── bower.json
├── Gruntfile.js
└── package.json

jQuery Bootstrap Auto-Hiding Navbar