vue实现某个元素超出可视区域，固定元素展示隐藏

<div class="btn-warp">
        <button ref="subnav" class="price-btn" >我是元素按钮</button>
  </div>

  <div class="fixed-footer" v-if="isShow">
      <a href="tel:111-111-111">
        <i class="el-icon-phone-outline tel"></i>
        <span class="text">我是fiexd 固定按钮 目标元素超出可视区域展示反之隐藏</span>
      </a>
   </div>

data(){
  return {
    isShow:false
    }
},
mounted(){
 if (this.$refs.subnav.getBoundingClientRect) {
        this.scrollTopp(this.$refs.subnav.getBoundingClientRect().top)
     }
},
  methods: {
        scrollTopp(h) {
          this.scrollTop(res => {
            this.isShow = res.scrollH > h ? true : false;
        })
      },
    //此方法可封装为utils
      scrollTop(callback) {
        // 页面总高
        var totalH = document.body.scrollHeight || document.documentElement.scrollHeight;
        // 可视高
        var clientH = window.innerHeight || document.documentElement.clientHeight;
        var result = {}
        window.addEventListener('scroll', function(e) {
          // 计算有效高
          var validH = totalH - clientH
          // 滚动条卷去高度
          var scrollH = document.body.scrollTop || document.documentElement.scrollTop
          // 百分比
          result.percentage = (scrollH / validH * 100).toFixed(2)
          result.scrollH = scrollH;
          callback && callback(result)
        })
      }
}

原文：https://blog.csdn.net/weixin_34620163/article/details/114009033