Animated slide down header on page scroll

This plugin help you to create a beautiful slide down effect when you page scroll down without cloning the header...

by abhishek bhandari

HTML

<header class="header-wrapper">
    <ul>
      <li>home</li>
    <li>about</li>
    <li>project</li>
    <li>demo</li>
    <li>contact</li></ul>
    
</header>
<div class="content">
  lorem ipsum is simply a dummy text to make the sentences more identified to users... 
      lorem ipsum is simply a dummy text to make the sentences more identified to users... 
      lorem ipsum is simply a dummy text to make the sentences more identified to users... 
      lorem ipsum is simply a dummy text to make the sentences more identified to users... 
      lorem ipsum is simply a dummy text to make the sentences more identified to users... 
      lorem ipsum is simply a dummy text to make the sentences more identified to users... 
      lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users...   lorem ipsum is simply a dummy text to make the sentences more identified to users... 
    rs...   lorem ipsum is simply a dummy...

CSS

.header-wrapper{
      transition: 1s all ease;
    width:100%;
    background-color:black;
    height:65px; -webkit-animation: show-nav;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    position:absolute;
    top:0;
}
.header-wrapper ul{
    text-align:center; 
    list-style:none;
}
.header-wrapper ul li{
     display:inline-block;
    font-size:16px;
    color:white;
    line-height:65px;
    margin-right:15px;
}
  .header-wrapper.is-scrolled {
    position: fixed !Important;
    width: 100%;
    height:65px;
    top:0;
    background-color: #000;
    box-shadow: 0px 1px 0px rgba(0,0,0,0.1),0px 2px 2px rgba(0,0,0,0.1);
    transition: 0.2s all ease;
    -webkit-animation: show-nav;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;
  }
.content{
    padding:50px; 
}
  .header-wrapper.going-back-up{
    top:-65px;
    position: fixed;
    width: 100%;
  }

JavaScript

jQuery(function() {
        var header = jQuery(".header-wrapper");
                            
            function updateHeader() {
                var scroll = jQuery(window).scrollTop();
                if (scroll >= 400) {
                    header.addClass("is-scrolled");
                    }
                if (scroll < 100 && header.hasClass("is-scrolled")) {
                    header.removeClass("is-scrolled");
                    header.addClass("going-back-up").delay(250).queue(function(next) {
                    jQuery(this).removeClass("going-back-up");
                     next();
                    });
                  }
                }
                            
                jQuery(window).scroll(function() {
                    updateHeader();
                });
                        
                updateHeader();
                });