vue实现吸顶功能

<template>
  <div>
    <div class="searchBar" id="searchBar">
      <ul :class="searchBarFixed == true ? 'isFixed' :''">
        <li>
          企业
          <i class="iconfont icon-jiantouxia"></i>
        </li>
        <li>
          关系
          <i class="iconfont icon-jiantouxia"></i>
        </li>
        <li>
          招标动态
          <i class="iconfont icon-jiantouxia"></i>
        </li>
        <li>
          中标情况
          <i class="iconfont icon-jiantouxia"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchBarFixed: false
    };
  },
  methods: {
    handleScrolls() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop, "滚动");
      let offsetTop = document.querySelector("#searchBar").offsetTop;
      // console.log(offsetTop, "top");
      scrollTop > offsetTop
        ? (this.searchBarFixed = true)
        : (this.searchBarFixed = false);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrolls);
  }
};
</script>


<style lang="less" scoped>
.isFixed {
  position: fixed;
  background-color: #fff;
  top: 0.92rem; //根据功能设置指定的高度
  z-index: 999;
}
</style>