GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → pixelspring → SlideUpTopBar-for-Foundation

pixelspring / SlideUpTopBar-for-Foundation

Licence: MIT license
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.

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Labels

jquerydemoscrollingshowhidezurb-foundation

Projects that are alternatives of or similar to SlideUpTopBar-for-Foundation

vue-in-viewport-mixin
Vue 2 mixin to determine when a DOM element is visible in the client window
Stars: ✭ 99 (+110.64%)
Mutual labels:  scrolling
EasyScrollDots
Single page scroll JavaScript plugin that allows for vertical navigation of page sections
Stars: ✭ 38 (-19.15%)
Mutual labels:  scrolling
use-scroll-direction
A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.
Stars: ✭ 24 (-48.94%)
Mutual labels:  scrolling
just-scroll
Simple indicate the possibility of scrolling on a page with СSS3 animation.
Stars: ✭ 34 (-27.66%)
Mutual labels:  scrolling
atom-zurb-foundation
Zurb Foundation 6 for sites snippets.
Stars: ✭ 31 (-34.04%)
Mutual labels:  zurb-foundation
clever-infinite-scroll
A useful infinite scroll jQuery plugin. It changes title and URL automatically, it's nice for SEO.
Stars: ✭ 56 (+19.15%)
Mutual labels:  scrolling
cachu-slider
🌈 🔆 Create animated full screen and content-fit sliders efficiently.
Stars: ✭ 30 (-36.17%)
Mutual labels:  scrolling
infinite-viewer
Infinite Viewer is Document Viewer Component with infinite scrolling.
Stars: ✭ 85 (+80.85%)
Mutual labels:  scrolling
nts
NTS Radio downloader and metadata parser
Stars: ✭ 58 (+23.4%)
Mutual labels:  show
react-native-infinite-scroll
A simple implementation of infinite scrolling for React Native.
Stars: ✭ 19 (-59.57%)
Mutual labels:  scrolling
really-smooth-scroll
A script that smoothen scrolling in the browser
Stars: ✭ 21 (-55.32%)
Mutual labels:  scrolling
linearmouse
🖱 The mouse and trackpad utility for Mac.
Stars: ✭ 1,151 (+2348.94%)
Mutual labels:  scrolling
ng2-go-top-button
A simple customizable go-top-button component for Angular projects.
Stars: ✭ 18 (-61.7%)
Mutual labels:  scrolling
brackets-zurb-foundation
This Brackets extension adds the Zurb Foundation basic template to an empty new file.
Stars: ✭ 30 (-36.17%)
Mutual labels:  zurb-foundation
react-sticky-headroom
A React Component to hide a Header using CSS sticky position
Stars: ✭ 22 (-53.19%)
Mutual labels:  scrolling
comical-jekyll-theme
A Configurable Webcomic Theme for Jekyll
Stars: ✭ 39 (-17.02%)
Mutual labels:  zurb-foundation
react-list-any-height
React scroll list for item with any height
Stars: ✭ 12 (-74.47%)
Mutual labels:  scrolling
mousecase
A JavaScript utility enabling horizontal dragging on mousedown events 🖱
Stars: ✭ 35 (-25.53%)
Mutual labels:  scrolling
momentum
Track movement and basic events with CSS custom properties
Stars: ✭ 19 (-59.57%)
Mutual labels:  scrolling
slim-pickins-jekyll-theme
A minimal Jekyll theme
Stars: ✭ 42 (-10.64%)
Mutual labels:  zurb-foundation
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].