vue 吸顶展示效果

获取当前鼠标(手指)位置距离页面顶部的位置

const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

根据你需要吸顶的标签，在该标签上通过属性ref进行获取元素距离顶部的高度

<div class="wrap" ref="topLabel" :class="showTopTitle ? 'text' : 'dispaly'"></div>

在方法里通过下面方法进行获取需要吸顶元素距离顶部的高度

this.$refs.topLabel.offsetTop

在data()对showTopTitle进行默认赋值为false，不显示
还需要在mounted里面进行事件监听

window.addEventListener('scroll', this.scrollToTop(), true )

然后在scrollToTop()方法中进行位置的比较

scrollToTop() {
   if (scrollTop > this.$refs.topLabel.offsetTop) {
        this.showTopTitle = true
      } else {
        this.showTopTitle = false
      }
}

在CSS中对动态绑定得class添加属性（根据业务需求进行自行添加，如下举例）

.text {
      position: fixed;
      position: -webkit-fixed;
      top: 0;
      z-index: 10;
    }
    .dispaly {
      display: none;
    }

最后别忘了销毁监听事件呦

destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
 }