SlideUpTopBar is an extension for Zurb Foundation's top-bar component. It hides the top-bar when scrolling down a page & shows it when scrolling back up the page.
Include jQuery (which you already have if you are using Foundations top-bar component)
Include the CSS file, or add it to your own styles
Include sup-topbar.min.js after your Foundation scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="sup-topbar.min.js"></script>
<link rel="stylesheet" href="css/sup-styles.css" />
Wrap your top-bar in a div with the class "slideUp". You are not restricted to any particular height of your top-bar:
<div class="slideUp">
<nav class="top-bar" data-topbar>
...
</nav>
</div>
Tested with:
- Foundation 5
- Foundation 6 Standard Grid
- Foundation 6 Flex Grid
View it in action here: SlideUpTopBar Demo