javascript - CSS3 や JavaScript を使用したモバイル Web スライドアップ メニュー

Question

基本的に、ユーザーがページの上部に向かって上にスクロールすると、すばやくスムーズにビューにスライドアップする (下から) スライドアップメニューを作成しようとしていますが、下にスクロールしてビューからすばやくスムーズにスライドします。読み続けて。google+ android/ios アプリのメニューによく似ています。

私はこれを達成するための小さなJavaScriptを書きました...しかし、アニメーションはせいぜい途切れ途切れで、iosデバイスではうまく再生されません。nexus 4、iPhone 4、および iPad 2 でこれをテストしています。iOS デバイスでは、スクロールが完全に停止した後にのみメニューがアニメーション化されます。それを修正する方法。

css3のアプローチをした方が良いでしょうか? もしそうなら、どうやってそれを行うのですか？また、ユーザーが停止した後ではなく、スクロール中にアニメーションが確実に発生するようにする方法はありますか? ありがとう！

ここに私のJavaScriptコードがあります:

(function () {
    var previousScroll = 0;
        $(window).scroll(function(){
        var currentScroll = $(this).scrollTop();
            if (currentScroll > previousScroll){
                $("#disappearing-footer").slideUp('fast');
            } else {
                $("#disappearing-footer").slideDown('fast');
        }
        previousScroll = currentScroll;
    });
}());

CSS:

 #disappearing-footer {
  background-color: #333333;    
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70px
}