title: fadeOut with jQuery .removeClass
body: <p>Good day! I'm new here! For now, sorry for stupid :-)</p>
  
  <p>Function: Header becomes visible when scrolling down. And hidden when you scroll to the top. Code works but I can't make soft fade-outs with removeClass.
  Can someone help me?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  jQuery( document ).ready(function() {  
  
    var header_fixed = jQuery(".header-fixed")
    jQuery( header_fixed ).wrap( "&lt;div class='header-f-wrapper'&gt;&lt;/div&gt;" );
    var header_f_wrapper = jQuery (".header-f-wrapper");
    var height = jQuery(".et-l--header").height()+(20);
  
  
      jQuery(window).scroll(function(){ 
      if(jQuery(this).scrollTop()&gt;height){
      header_f_wrapper.addClass("header-show");
      }
      else{
      header_f_wrapper.removeClass("header-show");
      }
    })
  })
  &lt;/script&gt;
  &lt;style&gt;
  @keyframes fadein {
      from { opacity: 0; }
      to { opacity: 1; }
  }  
  .header-f-wrapper {
  display:none;
  } 
  .header-f-wrapper {
  z-index: 999; /* display at the top */ 
  position: fixed;
  width:100%;  
  top: 0;
  -webkit-animation: fadein 0.9s ease-in; 
  -moz-animation: fadein 0.9s ease-in;
  animation: fadein 0.9s ease-in;
  }
  .header-f-wrapper.header-show {
  display:block;
  }}
  
  }}
  &lt;/style&gt;
  </code></pre>