title: Animate on scroll in mobile safari
body: <p>I have a header with position:fixed and inside it I have a logo. The header gets added a class "small" on scroll and changes the logo from a large image to small image and uses CSS3 transitions to have a smooth transition.</p>
  
  <pre><code>  $(document).on("scroll",function(){
          if($(document).scrollTop()&gt;70){ 
              $("header").removeClass("large").addClass("small");
              }
          else{
              $("header").removeClass("small").addClass("large");
              }
          });
  </code></pre>
  
  <p>This works fine in all browsers on desktop. The issue I am running into is on iOS using Safari or Chrome, when I scroll, the animation only happens after the finger is released, making an ugly user experience. Is there a way to detect a scroll gesture so that when the viewport is scrolled, it animates based on the speed?</p>