jQuery 往下滑动隐藏导航、往上滑动显示导航

需求：jQuery 往下滑动隐藏导航动画效果、往上滑动显示导航动画效果

1.引入css3 annimate.min.css 

2.用js代码判断是往下还是往上滑动，代码如下

/*评论模块的滚动隐藏效果*/
var windowTop=0;//初始话可视区域距离页面顶端的距离
$(window).scroll(function() {
    var scrolls = $(this).scrollTop();//获取当前可视区域距离页面顶端的距离
    if(scrolls>=windowTop){//当scrolls>windowTop时，表示页面在向下滑动
        //需要执行隐藏导航的操作
        if (!$('.more-comment-list-block').hasClass('fadeOutUp')) {
            $('.more-comment-list-block').addClass('animated fadeOutUp');
            $('.more-comment-list-block').removeClass('fadeInDown');
            $('.container').css('margin-top','45px');
        }
        windowTop=scrolls;
    }else{
        //需要执行显示导航动画操作
        if (!$('.more-comment-list-block').hasClass('fadeInDown')) {
            $('.more-comment-list-block').addClass('animated fadeInDown');
            $('.more-comment-list-block').removeClass('fadeOutUp');
            $('.container').css('margin-top','148px');
        }
        windowTop=scrolls;
    }
});

动画效果参考官方animate效果 http://www.jq22.com/yanshi819

效果截图

我运行的效果：

往上滑动隐藏导航：

往下滑动显示导航：

思路：

1.判断往下滑动还是往上滑

2.找对应的动画效果

3.通过jQuery控制CSS3 animate的class