jQuery Plugin For Auto Hiding Bootstrap Fixed Navbar

A jQuery extension for Bootstrap's navbar component that makes the fixed-to-top navigation bar auto hide as you scroll down the page, and reveals it again as your scroll up the page.

Currently supports the latest Bootstrap 4 framework.

How to use it:

1. Create a standard fixed to top Bootstrap navbar. Note that you must have Bootstrap 4 or Bootstrap 3 installed.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

2. Load the jQuery library and the jquery.bootstrap-autohidingnavbar.js script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.bootstrap-autohidingnavbar.js"></script>

3. Call the plugin on the Bootstrap navbar and done.

$("div.navbar-fixed-top").autoHidingNavbar();

4. Set any options you want to override.

// disable auto-hide
disableAutohide: false,

// shows up when scrolling the page upwards
showOnUpscroll: true,

// shows up when scroll reaches the page's end.
showOnBottom: true,

// "auto" means the navbar height
hideOffset: 'auto', 

// The duration of the show and hide animations
animationDuration: 200

Change log:

2018-04-24

• Fixed for Bootstrap 3.3.7.

2018-04-08

• Updated for Bootstrap 4

2016-04-08

• Fixed height not calculated correctly with box-sizing: border-box; and height set

 

---

This awesome jQuery plugin is developed by istvan-ujjmeszaros. For more Advanced Usages, please check the demo page or visit the official website.