vue 获取元素在浏览器的位置_Vue获取页面元素的相对位置的方法示例

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

发现问题

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

// html 结构

• 首页推荐
• 最新发布

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

// 该函数主要功能返回，滚动的高度以及文档占比窗口高度的百