vue 吸顶菜单效果小demo

整个吸顶小demo
场景描述，如下图：

功能描述：当滚动条划过轮播图的时候 让正在热映和即将上映 这块吸顶，滚动条滚动回去的时候吸顶消失

吸顶效果逻辑:
当滚动条滚动一定的距离例如（轮播图）的时候加一个class 滚回来删除那个class
** 如果滚动距离大于等于轮播的高度 fixed 小于 unfixed
1.滚动距离怎么获取：(document.documentElement.scrollTop) 操作原生
2.轮播图高度怎么动态获取：
* 原生做法: 给dom 起个id 获取到dom ( 隐藏实力 不能让人家知道你会原生)
* vue中:
+ 用ref 挂在到普通节点拿到的是原生DOM;
+ 挂在到组件上拿到的是对象(this.$refs.myswiper. $el.offsetHeight)
** 怎么给组件动态的增加class： 数组 三目 对象

html代码

<swiper :key='loopList.length' ref="myswiper">
   <div class='swiper-slide slide' v-for='data in loopList' :key="data.id">
     <img :src="data.img | filterImg"/>
   </div>
 </swiper>
 <filmHeader :class="isfixed ? 'fixed' :''"></filmHeader>

script

data () {
   return {
     loopList: [],
     isfixed: false
   }
 },
 
 mounted () {
  // 监听滚动事件
   window.onscroll = this.handleScroll
 },
 // 不影响其他组件要离开的时候解绑
  beforeDestroy () {
    window.onscroll = null
  },
 methods: {
    handleScroll () {
    if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
      // console.log('fixed')
      this.isfixed = true
    } else {
      // console.log('unfixed')
      this.isfixed = false
    }
  }
}

style

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