title: jquery on scroll event
body: <p>I am trying to make it so a img changes to a gif when the user is scrolling on a site.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img src="img/giphy.gif" alt="" id="imgAnimate"&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function()
          {
              $("#imgAnimate").hover(
                  function()
                  {
                      $(this).attr("src", "img/giphy.gif");
                  },
                  function()
                  {
                      $(this).attr("src", "img/giphy.png");
                  });
          });
  </code></pre>
  
  <p>I got this but now is it when you hover over the img it changes into a gif.
  How can I make this happen when user is scrolling.</p>
  
  <p>Thanks you if you can help me.</p>