title: mobile scrolling event : an animation when I scrolling the screen
body: <p>I want to do an animation when the scrollTop in a certain value(like 500).</p>
  
  <p>I used CSS3 and some event listener to finish this animation.</p>
  
  <p>this is javascript code:</p>
  
  <pre><code>   $(window).on("scroll",animation);
     $(window).on("touchmove",animation);
  
     var oldscroll = 0;
  
  
     function animation(){
          var derection;
  
          if (oldscroll - $("body").scrollTop() &lt; 0){
              derection = 1;
          }else if(oldscroll - $("body").scrollTop() &gt; 0){
              derection = -1;
          }else{
              derection = 0;
          }
  
          if($("body").scrollTop() &gt;=50 &amp;&amp; derection == 1){
              $("nav ul").removeClass("animate_ul_back");
              $("nav ul").addClass("animate_ul");
              $("nav").addClass("animate_nav");
          }else if($("body").scrollTop() &lt;= 50 &amp;&amp; derection == -1){
              $("nav ul").removeClass("animate_ul");
              $("nav ul").addClass("animate_ul_back");
              $("nav").removeClass("animate_nav");
          }
          oldscroll = $("body").scrollTop();
      }
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>    .animate_nav{
          position:fixed;
          top:0px;
          z-index: 100;
      }
  
      .animate_ul{
          -webkit-animation: ulmove 0.2s 0s;
          left:12px;
      }
  
      .animate_ul_back{
          -webkit-animation: ulmoveback 0.2s 0s;
          left:-46px;
      }
  
  
      @-webkit-keyframes ulmove{
          from{
              left:-46px;
          }
          to{
              left:12px;
          }
      }
  
      @-webkit-keyframes ulmoveback{
          from{
              left:12px;
          }
          to{
              left:-46px;
          }
      }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;nav&gt;
       &lt;ul class="clearfix"&gt;
          &lt;li class="logo_min"&gt;&lt;img src="images/logo_animate.png"&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#" class="current"&gt;首页&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>however,even in the browser(safari) of iphone(IOS7) the simple animate will be defer until the scroll finish.</p>
  
  <p>I know the problem is the event listener --- scroll and touchmove.</p>
  
  <p>How can I fix the problem.If a event Listener like scrolling exist?</p>
  
  <p>I haved tried setTimeout, setInterval or requestanimationframe. They don't work when the document is scrolling and my finger has left the screen.</p>
  
  <p>ths all first.</p>