Auto Shrinking Header Navigation with jQuery and CSS3

A sticky header navigation for your website that will auto shrink and expand itself based on scroll position. Built with HTML5, CSS / CSS3 and a little jQuery magic.

How to use it:

1. Create a nav list for your site navigation.

<nav class="nav">
  <ul class="nav-wrap">
    <li class="nav-list"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-list"><a href="#" class="nav-link">About</a></li>
    <li class="nav-list"><a href="#" class="nav-link">Buy Now</a></li>
    <li class="nav-list"><a href="#" class="nav-link">Contact Us</a></li>
  </ul>
</nav> 

2. The core CSS / CSS3 styles for the sticky site navigation.

.nav {
  background: #f2f2f2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nav-shrink {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: fixed;
  background: #5F5566;
}

.nav-shrink .nav-wrap { margin: 14.28571px auto; }

.nav-shrink .nav-list { font-size: 1rem; }

.nav-shrink .nav-link { color: white; }

.nav-wrap {
  max-width: 1280px;
  width: 90%;
  margin: 20px auto;
}

.nav-list {
  list-style: none;
  display: inline-block;
  font-size: 1.5rem;
  margin-right: 20px;
}

3. Add jQuery JavaScript library to your document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 

4. The jQuery script to detect the scroll position and toggle corresponding CSS classes on vertical page scrolling.

$(document).on('scroll', function() {
  if ($(document).scrollTop() > 0) {
    $('.nav').addClass('nav-shrink');
  } else {
    $('.nav').removeClass('nav-shrink');
  }
});

---

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