导航栏吸顶效果

html
仅实现导航吸顶效果（第一种）

<div class="member_top" :class="navBarFixed == true ? 'navBarWrap' :''">
      <qdd-icon class="icon-shezhi fr mr40" color="#fff" size="0.84rem"></qdd-icon>
      <qdd-icon class="icon-erweima1 fr mr40" color="#fff" size="0.84rem"></qdd-icon>
    </div>

改变导航的背景颜色 有透明到不透明 （第二种）用到三元写法 根据判断控制背景颜色变化

<Header :boxshadow="false" :bgcolor="[navBarFixed ? '#fff' : 'rgba(255,255,255,0)' ]" >
          
   </Header>

css

.navBarWrap
      position:fixed
      background rgba(255,255,255,1)

js

<script>
  export default {
    data(){
      return{
        navBarFixed:false, // 导航是否吸顶
      }
    },
    mounted(){
      // 事件监听滚动条
      window.addEventListener('scroll', this.watchScroll)
    },
    methods:{
      watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        //  当滚动超过 120 时，实现吸顶效果
        if (scrollTop > 120) {
          this.navBarFixed = true
        } else {
          this.navBarFixed = false
        }
      },
    },

  }
</script>