Auto-sliding Fixed Top Navigation With jQuery And CSS

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.