title: how to make this as scrolling animation faster on touch devices
body: <p>On scroll up, I move the input-field down as the user scrolls and moves it up as the user scrolls down.</p>
  
  <p>I like how this is behaving on desktop, but in multi-touch / mobile devices, it takes way too long of a scroll (distance) to get the <code>#searchInput</code> down into view.</p>
  
  <p>On mobile multi-touch, how can I get the input-field to come down on scroll up easier / with less of a scroll distance ?</p>
  
  <p>Here is a JSFiddle: <a href="http://jsfiddle.net/Fc6PU/3/" rel="nofollow">http://jsfiddle.net/Fc6PU/3/</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>var scrollTop = 0;
  var upDistance = 0;
  var downDistance = 0;
  var written = false;
  var searchTop = 0;
  $(window).on('scroll', function(){
      if($(window).scrollTop()&lt;scrollTop){
          $('#searchInput').removeClass('initialTop').addClass('slideBack');
      written = false;
      downDistance = 0;
      upDistance++;
          $('#searchInput').css('top', -21+upDistance);
      }
  else{
      upDistance = 0;
      downDistance++;
      if(!written){
          searchTop = parseInt($('#searchInput').css('top'));
          written = true;
      }
          $('#searchInput').css('top', searchTop-downDistance);
      }
      scrollTop = $(window).scrollTop();
  });
  </code></pre>