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

12

Version

1.0.0

License

MIT

Last publish

Collaborators

  • iamrelos