使用css3和/或javascript的移动web向上滑动菜单

基本上，我试图创建一个向上滑动（从底部）菜单，当用户向上滚动到页面顶部时，该菜单可以快速、平稳地向上滑动到视图中，但当用户向下滚动继续阅读时，该菜单可以快速、平稳地从视图中滑出。很像google+android/ios应用程序中的菜单

我写了一点javascript来实现这一点。。。然而，动画充其量只是一个波折，在ios设备上无法很好地播放。我正在Nexus4、iPhone4和iPad2上进行测试。在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:

---

这里有一个图书馆。在那里看它的演示。而且它很容易使用。谢谢，我会看看sidetap，但它似乎只是facebook风格菜单中幻灯片的一个框架？除非还有更多我看不到的。

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