ScrollNav is a small, lightweight jQuery plugin for adding an auto-hiding navbar to websites. It works best with BootStrap based websites, but can easily be dropped into any site with a fixed or static navbar.
ScrollNav will make your navbar act as a static navbar when scrolling down the page, and an absolutly positioned navbar that was just out of sight when scrolling up the page. Once the navbar is in full view, it will act as a fixed element at the top of the page.
You can view a demo here
Given this markup:
<html>
<!-- jQuery/ScrollNav JS includes -->
<body>
<div id="navbar" style="position: fixed;">
<a class="brand">Navbar Example</a>
<ul>
<li><a href="www.google.com">Obscure Website</a></li>
<li><a href="www.reddit.com">Time Sinks</a></li>
</ul>
</div>
</body>
</html>The resulting call to the ScrollNav plugin would be such:
$("#myNavBar").scrollNav();If you were using a static navbar, add the navbar's height in padding to the top of the document body (to avoid the navbar overlapping body content).
Given that I originaly wrote the plugin with Bootstrap in mind, it should work just dropped into place when used with a bootstrap navbar. Mobile compatibility took an ugly hack (namley injecting a bit of css into the DOM), but it works. To enable bootstrap mobile compatibility, call the plugin with
$("#myNavBar").scrollNav({"bootstrap_mobile": true});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent