vue-吸顶效果（屏幕滚动距离）

• 要点：
  vue中不要操作Dom来获取元素，这里用ref属性来替代Dom获取元素。
  this.$ refs.myswiper.$el ：获取标签上标有属性ref='myswiper’的元素。
  this. $ refs.myswiper.$el.offsetHeight ：表示该轮播swiper元素的高度
  document.documentElement.scrollTop： 表示屏幕滚动的高度。

 mounted () {
    window.onscroll = this.handScroll // 不能加（），否则会返回undefined
  },
  methods: {
    handScroll () {
      // console.log('111')
      // console.log(document.documentElement.scrollTop, this.$refs.myswiper.$el.offsetHeight)// 获取滚动距离和轮播高度
      // if(滚动距离>=轮播的高度)
      if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
        // console.log('fixed')
        this.isFixed = true
      } else {
        // console.log('unfixed')
        this.isFixed = false
      }
    }
  }

• 主页.vue中引用组件上加类名，在组件中对该类名进行css操作

<Header :class="isFixed?'fixed':''"></Header>

.fixed{
  position: fixed;
  left:0px;
  top:0px;
  width:100%;
  height:40px;
  background:white;
}