title: hide div on scroll down event wordpress
body: <p>i am trying to hide #header on scroll down event and then reappear on page scroll up.</p>
  
  <p>page link :- <a href="http://elementsmart.com/product-category/jewellery/" rel="nofollow">http://elementsmart.com/product-category/jewellery/</a></p>
  
  <p>the javascript code i used</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"   type="text/javascript"&gt;
  $('#primary').scroll(function(){
  if($(this).scrollTop() &gt; 300) $('#header').fadeOut('slow');
  if($(this).scrollTop() &lt; 300) $('#header').fadeIn('slow');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header-container { 
  position:fixed !important;
  margin-left:1.6% !important;
  z-index:999 !important;
  }
  </code></pre>
  
  <p>when someone scrolls primary need the header to hide.</p>
  
  <p>tried on jsfiddle seems to be working perfect but on page its now showing .</p>
  
  <p>can someone guide ?</p>