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
}