Shrink Sticky Header Nav On Scroll With jQuery And CSS3

File Size: 4.82 KB
Views Total: 13006
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

      <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>

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="" 

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){
  } else {

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.