Auto Hide Fixed Bootstrap 4 Navbar On Scroll Down
File Size: | 15.1 KB |
---|---|
Views Total: | 8443 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.