css吸顶效果实现

在网上看了一些博客 方法千篇一律 除了使用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
    },