Vue获取页面元素的相对位置的方法示例

今天在开发源码一处发现有一处需要获取元素的相对位置高度，发现getBoundingClientRect有一个问题，它是用于获取某个元素相对于视窗的位置集合，达不到我想要的要求，如是看到阮老师写的一篇文章，关于用Javascript获取页面元素的位置，很好解决了我的我问题

发现问题

当我滚动到元素的位置时候，我想把元素固定在头部

// 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)
  })
}

可以看到该元素的距离顶部595px，正常显示
当我先滚动一段距离后，然后再次刷新，滚动条位置还会记录之前的位置，这是top为195px，这也是正常的，因为

getBoundingClientRect

是根据浏览器窗口进行定位置的
而我想要的是想要不管浏览器滚动条位置在何处时刷新浏览器，我所绑定的dom元素都是根据文档左上角进行定位的

offsetTop

网上有人说用offsetTop，其实offsetTop是对当前对象到其上级层顶部的距离。不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性