jQuery Plugin To Hide Sticky Navbar When Scrolling Down - Scroll Up Menu

jQuery Plugin To Hide Sticky Navbar When Scrolling Down - Scroll Up Menu
File Size: 5.84KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Scroll Up Menu is a mobile-first jQuery plugin that auto hide the sticky top navigation menu when scrolling down the page, and show when scrolling up. This is really useful for mobile browsers with little space for annoying fixed headers.

See also:

Basic Usage:

1. Load the jQuery javascript library and jQuery Scroll Up Menu plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.scrollupformenu.js"></script>

2. Create the html for a sticky top navigation bar.

<div id="top">
...
</div>

3. Style the navigation bar with CSS according to your needs.

#top {
...
}

4. Initialize the plugin with default settings.

<script>
$(function() {			
$('#top').scrollUpMenu({
waitTime: 200,
transitionTime: 150,
menuCss: { 'position': 'fixed', 'top': '0'}
});
});
</script>

This awesome jQuery plugin is developed by dvdsmpsn. For more Advanced Usages, please check the demo page or visit the official website.