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>');
  }
});

まとめ:
このナビゲーションバーのアニメーション効果は1ページの内容の長いページを使って、ナビゲーションバーを迅速に位置決めすることができて、便利で速くて、ユーザーの体験性が良いです!主にJQのscroll()イベント、scrollTop()、addClass()、removeClass()メソッド、スクロール方向の判断方法を使用しています!