vue移动端 导航吸顶（固定定位）页面滚动出现抖动

Question

1-在页面中监听了滚动条，滚动到310px就固定定位了，添加类名的方式
handleScroll () {

  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop > 310) {
    this.searchBarFixed = true;
  } else {
    this.searchBarFixed = false;
  }

2-但是在页面滚动的时候 导航条就会一直抖动
下面是html样式
<div class="page-navbar searchBar" id="searchBar">

    <div :class="searchBarFixed == true ? 'isFixed' :''">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1" class="tab-item current-style">主页 <span></span></mt-tab-item>
        <mt-tab-item id="2" class="tab-item">简介 <span></span></mt-tab-item>
        <mt-tab-item id="3" class="tab-item">成员 <span></span></mt-tab-item>
        <mt-tab-item id="4" class="tab-item">赛事 <span></span></mt-tab-item>
      </mt-navbar>
    </div>
    

css的样式：

.searchBar {
.isFixed {

position: fixed;
background-color: #fff;
top: 0;
z-index: 999;
width: 100%;
background-color: #fff;

}
}

跪求大神解答

Answer 1

要不试试position:sticky这个属性？

Answer 2

判断一下，如果this.searchBarFixed=true的时候，就不要再执行this.searchBarFixed=true了

Answer 3

你好：针对你说的这种情形：在页面中监听了滚动条，滚动到310px就固定定位了。这种方法。现在用css就可以直接解决了，position的sticky属性完美解决