解决设置固定定位，会遮盖住元素的问题

解决方案是：给定位的盒子套个div

有问题的效果图

<template>
  <div>
    <!-- 也可以套个wra div -->
    <div :class="isFixed ? 'wra' : '' ">
      <div class="header" ref="he" :class="isFixed ? 'ding' : '' ">header</div>
    </div>
    <div class="list">
      <ul>
        <li v-for="item in list" :key='item' class="item">
          <div>{{item}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // provide: {
  //   age: 'liu man'
  // },
  data() {
    return {
      list: [1,2,3,4,5,6,7,8,9,10,11],
      isFixed: false
    }
  },
  mounted() {
    // 监听滚动事件的二种方式,使用完之后需解绑，这是全局事件,
    window.onscroll = this.userScroll;
    // window.addEventListener('scroll',this.userScroll)
  },
  methods: {
    userScroll() {
      let top = document.documentElement.scrollTop
      // 获取返回自身包括padding.boder.内容
      let he = this.$refs.he.offsetHeight
      if (top >= he) {
        this.isFixed  = true
        console.log(this.isFixed);
      }
      else{
        this.isFixed  = false
      }
    }
  },
  beforeDestroy() {
    // 解绑事件
    // window.removeEventListener(this.userScroll)
    // 在这个页面销毁后，取绑全局监听事件
    window.onscroll = null
  },
}
</script>

<style lang="stylus" scoped>
// 内容会重叠 ，给固定定位加个标准流盒子占高度
.wra {
  height 2rem
}

.header{
  font-size 2rem
  &.ding {
      position fixed
      top 0
      left 0
      background-color pink
      // 谁做动画就给谁
      transition all 5s
      // z-index  定位才会产生层级关系
    }
}
.item {
  font-size 2rem
}
</style>>

 解决问题后的效果图