页面顶部导航 根据滚动事件相应变化

效果图如下:

 

浏览器(window)监听scroll事件：

window.addEventListener('scroll', scrollFunction)

其中scrollFunction 函数

 function   scrollFunction (){
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      console.log(top);
      if( top > 60 ){
        this.backindex = false
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
      }else{
        this.backindex = true
      }
    }

注意：top为获取鼠标在浏览器中的滚动高度，通过该高度去操纵导航栏的变化

top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;