在網(wǎng)上看了一些博客 方法千篇一律 除了使用postion的sticky外 （兼容性不好）
最常見的就是監(jiān)聽滾動條的變化，動態(tài)給元素設(shè)置fixed定位了
但是這種方法其實是有bug的
表現(xiàn)為：當(dāng)滾動條的可滾動區(qū)域剛好是元素高度時，滾動條滾不到最下面 會抖動的循環(huán)跳
原因是：元素變?yōu)閒ixed布局 高度淪陷了
解決方法為：給需要吸頂?shù)脑仄郊?寫個標(biāo)簽 高度為需要吸頂元素的高度
代碼如下：
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)
// 監(jiān)聽滾動條
window.addEventListener('scroll', this.fixedFun)
}
fixedFun () {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isFixed = scrollTop > this.offsetTop
},
