title: Fade in when scroll down and fade out when scroll up
body: <p>This is the css code of the fade in animation</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.searchbar {
    opacity: 0;
  }
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want that a searchbar fades in when I scroll down (after 700px) and when I scroll up (so its less than 700px) it fades out</p>
  
  <p>this is the script in js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll &gt;= 700) {
      $(".searchbar").addClass("animated_fi fadeIn");
    } else {
      $(".searchbar").removeClass("animated_fi fadeIn");
    }
  });</code></pre>
  </div>
  </div>
  </p>