#### Navbars - Hide on Scroll

Statistics Invoices Schedule

###### Hide navbar on scroll

Hideable navbar option is available for fixed navbar only. Works in both top and bottom positions, single and multiple navbars.

##### Hide navbar on scroll

###### Plugin overview

Fixed navbar that slides out of view when scrolling down and slides back in when scrolling up. Based on a lightweight, high-performance `headroom.js` widget that allows you to react to the user's scroll. This is a perfect solution, if you alqays want to access your navbar, but bring elements into view when appropriate, and give focus to your content the rest of the time. Table below contains all plugin options available and can be applied to both top and bottom `fixed` navbars:

###### Plugin options

At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event. Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting `Headroom.options`. The structure of an options object is as follows:

Option | Description
--- | ---
`offset` | Vertical offset in px before element is first unpinned. Value for default navbar is `47px`.
`tolerance` | Scroll tolerance in px before state changes. Or you can specify tolerance individually for up/down scroll: up and down.
`classes` | CSS classes to apply: initial - when element is initialised, pinned - when scrolling up, unpinned - when scrolling down, top - when above offset, notTop - when below offset.
`scroller` | Element to listen to scroll events on, defaults to ``window``
`onPin : function() {}` | Callback when pinned, ``this`` is headroom object
`onUnpin : function() {}` | Callback when unpinned, ``this`` is headroom object
`onTop : function() {}` | Callback when above offset, ``this`` is headroom object
`onNotTop : function() {}` | Callback when below offset, ``this`` is headroom object

###### Example markup

Top navbar position example:

    /* Top position */
    $(".navbar-fixed-top").headroom({
    	classes: {
    		pinned: "headroom-top-pinned",
    		unpinned: "headroom-top-unpinned"
    	},
    	offset: $('.navbar').outerHeight(), // navbar height
    	onUnpin : function() {
    		$('.navbar .dropdown-menu').parent().removeClass('open'); // close dropdowns on hide
    	}
    });

Bottom navbar position example:

    /* Bottom position */
    $(".navbar-fixed-bottom").headroom({
    	classes : {
    		pinned : "headroom-bottom-pinned",
    		unpinned : "headroom-bottom-unpinned"
    	},
    	offset: $('.navbar').outerHeight(), // navbar height
    	onPin : function() {
    		$('.navbar .dropdown-menu').parent().removeClass('open'); // close dropdowns on hide
    	}
    });

##### Navbar component

Navbar is a navigation component, usually displayed on top of the page and includes brand logo, navigation and other components. By default, navbar has top `static` position. Navbar placement can be top and bottom, types can be static and fixed. Navbar available in 4 different sizes - large, default, small and mini. All navbar components automatically adjust their height to match chosen navbar height.

Example navbar

###### 1. Fixed top navbar

By default, navbar has top `static` position. To use, just add `.navbar-fixed-top` class to the navbar container and one of top navbar classes to the `<body>` element. The fixed navbar will overlay your other content, unless you add necessary class to the top of the `<body>` according to the size and placement.

###### 2. Fixed bottom navbar

Since navbars are available in 4 different sizes, it's required to specify proper class in `<body>` tag to set correct padding. If single navbar is sticked to the bottom of the page, correct body classes will be `.navbar-bottom` for default height and `.navbar-bottom-*` for given size - large (`*-lg`), small (`*-sm`) and mini (`*-xs`).

###### 2. Multiple fixed navbars

This kind of navbar group supports both static and fixed positions. Also fixed position is available for 2 navbars (both are sticked) and for the first (only first is sticked). If you need to stick only secondary navbar when it becomes fixed only after scroll to its position, the best way to achieve this effect is by using `affix` component.

##### Navbar classes

Navbar is a complex and very flexible component, which allows you to control appearance of different types of content, components placement, sizes, colors etc. All this functionality is available by setting proper classes to the navbar components and navbar itself. Table below demonstrates all available classes that can be used with the navbar:

Class | Description
--- | ---
`.navbar` | Default navbar class, must be used with any navbar type and color. Responsible for basic navbar and navbar components styling as a parent container.
`.navbar-fixed-top` | Makes navbar sticked to the `top` of the page. Requires proper class for `<body>` tag, see the table below.
`.navbar-fixed-bottom` | Makes navbar sticked to the `bottom` of the page. Requires proper class for `<body>` tag, see the table below.
`.navbar-static-top` | Full-width navbar that scrolls away with the page. Unlike the `.navbar-fixed-*` classes, no need to add any extra class on the body for padding correction.
`.navbar-default` `.navbar-inverse` | Default color options for navbar provided by Bootstrap styles: default - white navbar, inverse - dark grey navbar.
`.navbar-default-secondary` | If you have 2 light navbars, use this class to darken one of them. Based on default navbar background color.
`.navbar-inverse.bg-*` | Optional background colors for navbar. Just add one of available color classes to apply custom color scheme.
`.navbar-component` | Display navbar as a stand alone component, with border and rounded corners.

##### Body classes

Bottom navbar is available only as a `fixed` component, always sticked to the bottom of the page. All dropdown menus are automatically changed to dropups in this type of navbar. The fixed navbar will overlay your other content, unless you add necessary to the top of the `<body>`. Depending on the fixed navbar position and size, add one of the classes specified in the following table.

Class | Description
--- | ---
`.navbar-top` `.navbar-bottom` | This class adds necessary `top` or `bottom` padding to the `<body>` tag. Works only with default navbar height. If another height is specified, apply another class, see the line below.
`.navbar-top-*` `.navbar-bottom-*` | Controls padding for different navbar heights, for both positions. Available classes: mini (`*-xs`), small (`*-sm`) and large (`*-lg`). Default navbar requires `.navbar-top(bottom)-fixed` class.
`.navbar-top-*-*` `.navbar-bottom-*-*` | This type of classes is used only with multiple navbars. This is the only class, where `*-md` suffix is available. For example class `.navbar-top-md-xs` means main navbar has default height (`.*-md-*`), secondary navbar - mini height (`.*-xs`). It calculates both navbars height and adds top or bottom padding with the same value.