Vue获取页面元素的相对位置

// html 结构
<div :class="['source-subnav', isFixed ? 'tab-nav-fixed' : '']" ref="subnav">
     <ul>
        <li class="active"><a href="javascript:;">首页推荐</a></li>
        <li><a href="javascript:;">最新发布</a></li>
     </ul>
</div>
export default {
    data(){
        return {
            isFixed:false,
        }
    },    
    mounted(){
        if(this.$refs.subnav.getBoundingClientRect){
        this.scrollTop(this.$refs.subnav.getBoundingClientRect())
        }
    },
    methods:{
    // 这是封装的一个方法
        scrollTop(h){
            console.log(h);
            this.utils.scrollTop((res)=>{
                this.isFixed = res.scrollH > h ? true :false;
            })
        }
    }
}          
utils.js
// 该函数主要功能返回，滚动的高度以及文档占比窗口高度的百分比
utils.scrollTop = function(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)
    })
}

if(this.$refs.subnav.getBoundingClientRect){
    var top1 =  this.$refs.subnav.getBoundingClientRect().top + window.scrollY
    var top2 = this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;
    console.log(top1)
    console.log(top2)
    this.scrollTop(top)
}

function getElementTop(element){
   　var actualTop = element.offsetTop;
   　var current = element.offsetParent;
   　while (current !== null){
     　actualTop += current.offsetTop;
     　current = current.offsetParent;
   　}
   　return actualTop;
}

if(this.$refs.subnav.getBoundingClientRect){
    var top1 =  this.$refs.subnav.getBoundingClientRect().top + window.scrollY
    var top2 = this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;
    // getElementTop在上方 
    var top3 =  getElementTop(this.$refs.subnav)
    console.log(top1)
    console.log(top2)
    console.log(top3)
    this.scrollTop(top)
}

dom.getBoundingClientRect().top + window.scrollY; 
或者
dom.getBoundingClientRect().top+document.documentElement.scrollTop;
或者
function getElementTop(element){
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null){
     actualTop += current.offsetTop;
     current = current.offsetParent;
  }
  return actualTop;
}