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>