在网上看了一些博客 方法千篇一律 除了使用postion的sticky外 (兼容性不好)
最常见的就是监听滚动条的变化,动态给元素设置fixed定位了
但是这种方法其实是有bug的
表现为:当滚动条的可滚动区域刚好是元素高度时,滚动条滚不到最下面 会抖动的循环跳
原因是:元素变为fixed布局 高度沦陷了
解决方法为:给需要吸顶的元素平级 写个标签 高度为需要吸顶元素的高度
代码如下:
dom
<div style="height: 68px" v-show="isFixed"></div>
<div class="top flex_between" :class="{'isFixed': isFixed}">
</div>
css
.isFixed {
position: fixed;
top: 60px;
z-index: 8;
left: 0;
width: 100%;
}
js
mounted () {
this.offsetTop = document.querySelector('.TransportPlan .tabs').offsetTop
console.log('offsetTop', this.offsetTop)
// 监听滚动条
window.addEventListener('scroll', this.fixedFun)
}
fixedFun () {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isFixed = scrollTop > this.offsetTop
},