<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
