javascript - モバイルスクロールイベント：画面スクロール時のアニメーション

Question

scrollTopが特定の値（500など）のときにアニメーションを実行したい。

CSS3 といくつかのイベント リスナーを使用して、このアニメーションを完成させました。

これはJavaScriptコードです：

   $(window).on("scroll",animation);
   $(window).on("touchmove",animation);

   var oldscroll = 0;


   function animation(){
        var derection;

        if (oldscroll - $("body").scrollTop() < 0){
            derection = 1;
        }else if(oldscroll - $("body").scrollTop() > 0){
            derection = -1;
        }else{
            derection = 0;
        }

        if($("body").scrollTop() >=50 && derection == 1){
            $("nav ul").removeClass("animate_ul_back");
            $("nav ul").addClass("animate_ul");
            $("nav").addClass("animate_nav");
        }else if($("body").scrollTop() <= 50 && derection == -1){
            $("nav ul").removeClass("animate_ul");
            $("nav ul").addClass("animate_ul_back");
            $("nav").removeClass("animate_nav");
        }
        oldscroll = $("body").scrollTop();
    }

CSS コード:

    .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;
        }
    }

html:

<nav>
     <ul class="clearfix">
        <li class="logo_min"><img src="images/logo_animate.png"></li>
        <li class=""><a href="#" class="current">首页</a></li>
        <li class=""><a href="#">a</a></li>
        <li class=""><a href="#">b</a></li>
        <li class=""><a href="#">c</a></li>
    </ul>
</nav>

ただし、iphone(IOS7)のブラウザ(safari)でもスクロールが終わるまで簡易アニメーションは保留されます。

問題がイベントリスナーであることはわかっています---スクロールとタッチムーブ。

スクロールのようなイベントリスナーが存在する場合、どうすれば問題を解決できますか?

setTimeout、setInterval、または requestanimationframe を試しました。ドキュメントがスクロールしていて、指が画面から離れている場合は機能しません。

すべてが最初です。