Skip to content

pixelspring/SlideUpTopBar-for-Foundation

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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