bootstrap-autohide-navbar
1.0.0 • Public • Published bootstrap-autohide-navbar
A small jQuery plugin to show/hide twitter bootstrap 3 navbar on scroll.
Install using bower or npm
$ bower install bootstrap-autohide-navbar
$ npm install bootstrap-autohide-navbar
Include jQuery and Bootstrap
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.x.x/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.x.x/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.x.x/js/bootstrap.min.js"></script>
Include bootstrap-autohide-navbar.js
<script src="dist/bootstrap-autohide-navbar.min.js"></script>
Usage
$(function () {
'use strict';
$('.navbar').bootstrapAutoHideNavbar({
disableAutoHide: false,
delta: 5,
duration: 250,
shadow: true
});
});
or
$(function () {
'use strict';
var autohide = $('.navbar').bootstrapAutoHideNavbar({
disableAutoHide: true
});
autohide.show();
autohide.hide();
autohide.setDisableAutoHide(false);
});
Options
Property |
Required |
Default |
Description |
delta |
No |
5 |
How many pixels the user needs to scroll down before effect get trigger |
duration |
No |
250 |
Duration of animation in milliseconds |
shadow |
No |
false |
Add bottom shadow to navbar |
disableAutoHide |
No |
false |
Disable auto hide effect on scroll |
Methods
Name |
Parameter |
Description |
show |
None |
Show navbar |
hide |
None |
Hide navbar |
setDisableAutoHide |
boolean |
Disable/Enable auto hide effect |
Package Sidebar
Install
npm i bootstrap-autohide-navbar
Weekly Downloads