1.0.0 • Published 7 years ago

bootstrap-autohide-navbar v1.0.0

Weekly downloads
6
License
MIT
Repository
github
Last release
7 years ago

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

PropertyRequiredDefaultDescription
deltaNo5How many pixels the user needs to scroll down before effect get trigger
durationNo250Duration of animation in milliseconds
shadowNofalseAdd bottom shadow to navbar
disableAutoHideNofalseDisable auto hide effect on scroll

Methods

NameParameterDescription
showNoneShow navbar
hideNoneHide navbar
setDisableAutoHidebooleanDisable/Enable auto hide effect
1.0.0

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago