ナビゲーションバーは画面の移動によって変わります

先にツッコミを入れて、久しぶりに物を整理して、最近忙しくて死にました、毎日10时まで残业して、しかしこのように成长するのがとても速くて、とても楽しいです!さあ、整理してみましょう.
プロジェクトではヘッドナビゲーションをマウスのスライドに合わせて変化させる必要があるため、インターネットで多くの資料を調べたが、実は簡単に実現できる効果があった.

//css   ---------------------

.header-top {
  padding: 1em 0;
  /*background: #337AB7;*/
  background-color: rgba(51,122,183,0);
  position: fixed;
  z-index: 10000;
  width: 100%;
 }
 .header-top-false{
     background: rgba(51,122,183,0.9);
     transition:0.2s all;
    -webkit-transition:0.2s all;
    -moz-transition:0.2s all;
    -o-transition:0.2s all;
    -ms-transition:0.2s all;
 }



<script>
(function(){
  pos = 0;
  ticking = false;
  var header = document.querySelector(".header-top");
  window.addEventListener("scroll", function(e){
    pos = window.scrollY;
    if(pos > 300&&!ticking){
      header.classList.add("header-top-false");
      $('.logo').show(200);
      ticking = true;
    }
    if(pos < 300 && ticking){
      header.classList.remove("header-top-false");
      $('.logo').hide(200);
      ticking = false;
    }
  });
})();
</script>