jQuery根据滚动方向做导航条动画

目标：

实现jQuery判断滚动条方向做导航条动画：向下滚动隐藏导航条，向上滚动显示导航条！

效果图：

实现思路：

先静态布局好HTML结构，使用伪类：hover模拟动画效果，再使用jQuery 控制动画类的切换来实现效果！

代码实现：

HTML：

<!-- 实现原理：看js源码！切换类 -->
    <div class="top">
      <div class="main">
        <div class="logo img">
          假装有LOGO
        </div>
        <div class="nav">
          <ul>
            <li><a href="#">首页</a></li>
            <li class="l2"><a href="#">课程</a></li>
            <li class="l2"><a href="#">互撸娃</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">咨询</a></li>
            <li><a href="#">公告</a></li>
          </ul>
        </div>
        <div class="login">
          <a href="#" class="a1">登录</a>
          <a href="#" class="a2">注册</a>
        </div>
      </div>
    </div>

CSS:

*{margin:0px;padding:0px;font-family:"Microsoft Yahei";}
body{
  padding-top:60px;
}

.top{
  width:100%;height:60px;background:#15171f;
  //静态布局，定位初始状态
    position: fixed;
    top:-60px;
    transition:all 0.4s linear;
  }
//模拟动画
/*.top:hover{
  top:0;
}*/
//动画类
.top.on{
  top:0;
}

.main{width:1110px;height:60px;
  margin:0px auto;
}
.logo{width:103px;height:28px;
  margin-top:16px;float:left;}
.img{
    width:103px;height:28px;
    text-align: center;
    color:#fff;
  }
.nav{width:600px;height:60px;
  float:left;margin-left:100px;}
.nav ul li{list-style-type:none;
  width:80px;line-height:58px;text-align:center;
  float:left;
  padding:0 10px;//撑开内容
}
.nav ul li a{font-size:14px;color:#fff;
  text-decoration:none;

}

.nav li:hover{background:#00cece;}
.login{width:120px;height:30px;
  float:right;
  margin-top:15px;
}
.login a {color:#fff;font-size:14px;
  text-decoration:none;
  width:55px;height:30px;
  display:block;
  line-height:30px;
  text-align:center;
  border:1px solid #ddd;
}
.login .a1{float:left;}
.login .a1:hover{background:#00cece;}
.login .a2{float:right;background:#5580fb;}

.fixed{position:fixed;top:0px;}

jQuery:

$(function(){
  //获取到窗口的滚动高度
  var top1=$(window).scrollTop();
  //后面窗口滚动高度
  var top2;
  var topDom=$(".top");
  //初始化加载动画类
  topDom.addClass('on');

  $(window).scroll(function(){
    //每次滚动重新获取滚动高度
    top2=$(this).scrollTop();
    //top2>top1则表示向下滚动
    if(top2>top1){
      topDom.removeClass('on');
    }else{
      topDom.addClass('on');
    }
    //每次滚动完之后重新将新的滚动高度赋值给上一次的滚动高度！关键
    top1=top2;
  });
  //生成DOM节点
  for(var i=0;i<50;i++){
    $("body").append('<p>'+i+'</p>');
  }
});

总结：

这种导航条动画效果使用单页内容较长的页面，可以快速定位导航条，方便快捷、用户体验性好！主要用到了JQ中scroll()事件，scrollTop()、addClass()、removeClass()方法，以及如何判断滚动方向的方法！