需求: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