Show/Hide Sticky Navigation with jQuery and CSS3

A sticky top navigation menu that automatically hides when scrolling down, and shows up again as you scroll up the page. Written in jQuery, Html5, CSS and CSS3 transforms.

See also:

• Smooth Auto-Hide Header Navigation with jQuery and CSS3
• jQuery Plugin For Auto-hide Top Navigation Bar - Hidescroll.js

How to use it:

1. Create a navigation menu that is sticky at the top of the web page.

<nav id="navigation">
  <ul class="links">
    <li> <a href="#">Home</a> </li>
    <li> <a href="#">Download</a> </li>
    <li> <a href="#">Settings</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul>
</nav>

2. The CSS to style & position the navigation menu.

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  box-shadow: 0 -5px 5px 5px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

#navigation .links { float: right; }

#navigation .links li { float: left; }

#navigation .links li a {
  height: 50px;
  padding: 0 15px;
  display: block;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  line-height: 50px;
}

#navigation .links li a:hover {
  background: #f46159;
  color: #fff;
}

3. The JavaScript (jQuery) to enable the show/hide navigation menu.

$(document).ready(function () {
  var $navi = $("#navigation"), scrollTop = 0;
  $(window).scroll(function () {
    var y = $(this).scrollTop(), speed = 0.05, pos = y * speed, maxPos = 100;
    if (y > scrollTop) {
      pos = maxPos;
    } else {
      pos = 0;
    }
    scrollTop = y;
    $navi.css({
      "-webkit-transform": "translateY(-" + pos + "%)",
      "-moz-transform": "translateY(-" + pos + "%)",
      "-o-transform": "translateY(-" + pos + "%)",
      "transform": "translateY(-" + pos + "%)"
    });
  });
});

---

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