Skip to content

SlideUpTopBar is an extension for the Zurb Foundation 5 top-bar component. It hides the top-bar when scrolling down a page & shows it when scrolling back up the page.

License

Notifications You must be signed in to change notification settings

pixelspring/SlideUpTopBar-for-Foundation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SlideUpTopBar for Foundation

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.

Installation

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" />

Usage

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>

Compatibility

Tested with:

Demo

View it in action here: SlideUpTopBar Demo

About

SlideUpTopBar is an extension for the Zurb Foundation 5 top-bar component. It hides the top-bar when scrolling down a page & shows it when scrolling back up the page.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published