导航栏随屏幕移动而变化

先吐槽一下下，好久没有整理东西了，最近忙死啦，天天加班到十点，不过这样会成长很快，也是蛮开心的！好了开始整理一下下！

项目中用到了头部导航需要随着鼠标的滑动而变化，所以上网查了很多资料，其实很简单就能实现的效果。

//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;
 }


<!--导航栏北京色随scrollY的距离变化而变化-->
<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>