title: How do I get an image to fade in and out on a scroll using jQuery?
body: <p>This question seems easy but I cant seem to get the fade effect to work properly, please view the fiddle to see the code, you will notice that the image only fades in when you scroll back up and does not fade out when you scroll down, why does this happen? I don't think I fully understand the code I've written I would appreciate some help. </p>
  
  <p><strong>Here is the jQuery code</strong></p>
  
  <pre><code>var divs = $('.banner');
  $(window).scroll(function(){
  if($(window).scrollTop()&lt;10){
       divs.stop(true, true).fadeIn(5000);
  } else {
       divs.stop(true, true).fadeOut(5000);
   }
  });
  </code></pre>
  
  <p>Thank you in advance!</p>
  
  <p><a href="http://jsfiddle.net/a4FM9/809/" rel="nofollow">http://jsfiddle.net/a4FM9/809/</a> </p>