Auto Hide Fixed Bootstrap 4 Navbar On Scroll Down

A super tiny jQuery plugin for Bootstrap 4 that makes the fixed Bootstrap navbar auto hide and show as the visitor scrolls down or up the web page.

Supports both fixed top & bottom navbar. Licensed under the GPL-3.0.

How to use it:

1. Download and load the core JavaScript file auto-hiding-bootstrap-navbar.js after the Bootstrap's JavaScript.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<!-- Dependencies -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- Plugin -->
<script src="auto-hiding-bootstrap-navbar.min.js"></script>

2. That's it. The plugin will automatically apply the auto show/hide functionality to your fixed navbar.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

3. If your navbar is fixed to the bottom you can adjust the behaviour by assigning navOffset a negative value.

var navOffset = -150;

4. Adjust the animation speed. Default: 400ms.

var navMoveSpeed = 500;

---

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