Auto-sliding Fixed Top Navigation With jQuery And CSS
File Size: | 4.7 KB |
---|---|
Views Total: | 3569 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimalist jQuery fixed top navigation script that auto hides the menu on scroll down but slides it out again on scroll up.
How to use it:
1. Create a top navigation for your webpage.
<div id="menu" class="menu-min"> Menu </div>
2. Make it stick to the top of the webpage.
#menu { background-color: #333; color: #fff; position: fixed; z-index: 1000; display: block; top: 0; left: 0; width: 100%; padding: 30px; text-align: center; overflow: hidden; -webkit-transition: 500ms all ease-in-out; -moz-transition: 500ms all ease-in-out; -ms-transition: 500ms all ease-in-out; -o-transition: 500ms all ease-in-out; }
3. The required CSS/CSS3 styles for the sliding effect on menu close.
.menu-close { -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }
4. Load the required jQuery library at the end of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script>
5. The JQuery script to active the auto show/hide navigation.
var lastScrollTop = 0; $(document).scroll(function(){ var stop = $(this).scrollTop(); if (stop > lastScrollTop){ console.log('down'); // scrolling down if($('#menu').hasClass('menu-min')) { $('#menu').addClass('menu-close'); $('#menu').removeClass('menu-min'); } } else { // scrolling up if($('#menu').hasClass('menu-close')) { console.log('up'); $('#menu').addClass('menu-min'); $('#menu').removeClass('menu-close'); } } lastScrollTop = stop; });
Change log:
2016-06-18
- safari fix
This awesome jQuery plugin is developed by joshuajnet. For more Advanced Usages, please check the demo page or visit the official website.