一个非常常见的导航效果

样式自己写

效果： 固定导航（this_.nailFlag为true）----- 滑动页面导航定位在最顶部

不固定的导航 （this_.nailFlag为false） ----- 页面划走导航消失 鼠标移到顶部导航出现

两种导航可以自由切换

 //滚轮事件
scroll(){
  var this_ = this;
  var banOffTop=$(".commonHeader").offset().top;//获取到距离顶部的垂直距离
  var scTop=0;//初始化垂直滚动的距离
  $(document).scroll(function(){
    scTop=$(this).scrollTop();//获取到滚动条拉动的距离
    //console.log(scTop);查看滚动时，垂直方向上，滚动条滚动的距离  【this_.nailFlag定导航的开关】
    if(this_.nailFlag){
      if(scTop>banOffTop){
        //当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
        $(".commonHeader").addClass("headernailback");
      }else{
        $(".commonHeader").removeClass("headernailback");
      }
    }else{
      if(scTop>banOffTop){
        //当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
        $(".commonHeader").addClass("nonail");
      }else{
        $(".commonHeader").removeClass("nonail");
      }
    }
  })
},
//鼠标事件
showHeader(){
  var this_ = this;
  var banOffTop=$(".commonHeader").offset().top;//获取到距离顶部的垂直距离
  // * 移动时
  document.onmousemove = function(ev){
    var oEvent = ev || event;
    var scTop=$(this).scrollTop();//获取到滚动条拉动的距离
    if(!this_.nailFlag){
      if(oEvent.clientY <= 20 && scTop > banOffTop){
        $(".commonHeader").addClass("hover headernailback");
      }else{
        //---------------这里需要再次判断   因为导航有下拉框  如果不再判断就没办法选中（自行体会）------------------
        if(oEvent.screenY >= 300){
          $(".commonHeader").removeClass("hover headernailback");
        }

      }
    }


  }

},