title: Hide div while scrolling down
body: <p>I just want to hide an image when scroll down and show another image. When scroll to top of the page, first image needs to show and other image needs to be hide.</p>
  
  <p>I tried with this code.</p>
  
  <pre><code>//This is the image I just want to show at first
  &lt;img src="images/logo-wh.png" alt="" class="logo-white"&gt; 
  
  //This is the image I just want to show when scroll down
  &lt;img src="images/logo.png" alt="" class="logo-default"&gt;
  
  .logo-default{
    display:none;
  }
  
  $(window).scroll(function() {
      if ($(this).scrollTop() &gt; 0) {
          $('.logo-white').hide();
      } else {
          $('.logo-default').show();
      }
   });
  </code></pre>
  
  <p>But it isn't working as I expected. Any suggestions? </p>