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