vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式

Vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式

闲话少说，先上效果图

可以看到，当页面超出某一位置时，主导航消失，副导航显示，当页面重新回到该位置时，主导航会再次显示
简单说下原理，其实页面当中本身就存在着两个导航栏，只是通过v-show来控制他们俩之间的显隐
而副导航是固定在浏览器窗口的，所以他的position必须是fixed，即相对浏览器窗口进行定位
剩下的事情就是我们监听页面的滚动高度来判断在什么时刻进行动画效果的展示
原理是不是很简单！原理搞懂后，我们就抓紧实现，首先你的demo上一定要有足够的高度可以使页面上下滚动，做好这一点之后，我们开始编写代码

首先两个导航栏是同级的关系，关于导航栏中细节的样式就不多阐述了，主要看大体代码
我使用的编译器是stylus，与sass的编写方式略有不同

.nav-absolute
    position : absolute
    left : 0
    top : 0
    right : 0
    width : 100%
    background : url(../assets/img/31.png)
    background-repeat : no-repeat
    background-size : cover
    width : inherit
    height : 260px
    padding : 30px 0

首先是主导航，父级position一定要给好relative，否则absolute会找与之最相近的父级（父级可为relative也可absolute），若都没有则相对浏览器窗口进行定位，那我们的效果就是实现不了了
其次是副导航的样式，即要相对窗口进行定位

.fixed-wrapper
    position : fixed
    left : 240px
    top : 0
    right : 0
    width : 100%
    background : url(../assets/img/fixed-nav.png)
    background-repeat : no-repeat
    background-size : cover
    width : inherit
    height : 60px
    padding : 5px 0
    z-index : 99!important

接下来要开始监听窗口滚动的位置

scrollLength () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const top = document.documentElement.scrollTop
      console.log(scrollTop)
      if (scrollTop > 120) {
        let opacity = top / 240
        opacity = opacity > 1 ? 1 : opacity
        this.showOpacity = { opacity }
        this.showNav = false
      }
      if (scrollTop < 240) {
        this.showNav = true
      }
    }

给大家看一下打印的监听高度

大家可以看到在不同位置打印出的不同高度，这里我选择的是当高度大于120时开始进行动画效果，那么下面的含义其实就是我要控制主导航栏消失时opacity的效果，即让他有一个慢慢消失的动画效果（虽然消失的还是挺快的- - 、），这里的showNav是提前在data中声明好的，在两个导航栏父元素的div中分别加入v-show=“showNav"和v-show=”!showNav"即可

到这里整个动画效果就实现啦！是不是很简单

希望我们共同进步，如有更高效更简洁的实现方法还望大佬不吝赐教！