Shrink Sticky Header Nav On Scroll With jQuery And CSS3

This project makes use of jQuery and CSS/CSS3 to create a sticky header navigation that automatically shrinks on page scroll down.

How to use it:

1. Create a header navigation for your web page.

<header>
  <nav>
    <ul>
      <li>Nav List 1</li>
      <li>Nav List 2</li>
      <li>Nav List 3</li>
      <li>Nav List 4</li>
      <li>Nav List 5</li>
      ...
    </ul>
  </nav>
</header>

2. Style the header navigation and make it always stat on the top of the webpage on scroll.

header {
  width: 100%;
  padding: 60px 0;
  background: #fafafa;
  border-bottom: 1px solid #e1e1e1;
  z-index: 9999;
  top: 0;
  position: fixed;
}

3. Add smooth animation effect to the header navigation when shrinking.

header {
  /* animation magic */
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

4. Insert the latest version of jQuery JavaScript library into the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

5. The JavaScript to detect the scroll position and add the 'shrink' class to the sticky navigation.

$(document).on("scroll", function(){

  if ($(document).scrollTop() > 100){
    $("header").addClass("shrink");
  } else {
    $("header").removeClass("shrink");
  }
  
});

6. Shrink the header navigation.

.shrink { padding: 20px 0; }

---

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