问题
在一开始做实时滚动条顶部滚动对时候然后使用,在tabContainerDom滚动到距离顶部一段距离的时候显示headerFixed
<div ref="headerFixed" class="header-fixed" :class="{'show': showFixedBlock}"></div>
.header-fixed {
opacity: 0;
position: fixed;
z-index: 99;
top: 0;
width: 100%;
height: rem(52);
background-color: #fff;
box-sizing: content-box;
&.show {
opacity: 1;
}
}
高度判断
document.addEventListener('scroll', Util.throttle(() => {
let tabContainerDom = this.$refs.tabContainer;
let headerFixedHeight = this.$refs.headerFixed.getBoundingClientRect().height;
if (offsetTop <= headerFixedHeight) {
this.showFixedBlock = true;
}
else {
this.showFixedBlock = false;
}
}), 20);
这样写页面顶部的在滑动的时候会一直闪
解决办法
this.$refs.headerFixed.offsetHeight;
使用offsetHeight获取高度他就好了。这样页面就不闪了。
原因分析
基本是一样的,但是有tranfrom设置的是时候
getBoundingClientRect是动态计算的值,offsetHeight就是原本css设置的值
参考链接: JavaScript getBoundingClientRect() vs offsetHeight while calculate element height