vue 监听dom元素的滚动事件 实现某元素吸顶或者固定位置显示

孤单的是人，寂寞的是心。

这只是我写的一个简单的demo,但是所需数据与逻辑已走通, 拿走就能用的那种,希望你能看完

<template>
    <div>
        <div class="nav"></div>
        <div class="searchBar" ref="searchBar" style="width:100px;height:100px;overflow:scroll">
            <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>
                <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>
                <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>
                <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>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>
                <li>更多<i class="iconfont icon-jiantouxia"></i></li>

            </ul>
        </div>
        <div class="content">
        </div>
    </div>
</template>
<script>
  export default {
    components: {},
    mounted() {
      this.box = this.$refs.searchBar
      var $this = this
      // 监听这个dom的scroll事件
      this.box.onscroll  = () => {
        console.log('on scroll')
        $this.handleScroll()
      }
      console.log(this.box.onscroll)
    },
    data() {
      return {
        searchBarFixed: false
      };
    },
    methods: {
      handleScroll() {
        var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let box = this.$refs.searchBar
        console.log("box.scrolltop:"+box.scrollTop+" box.offsetTop:"+box.offsetTop)
      }
    }
  };
</script>
<style lang="less" scope>
.nav {
  height: 250px;
}
.content {
  height: 1900px;
}
.searchBar {
  .isFixed {
    position: fixed;
    background-color: #fff;
    top: 0;
    z-index: 999;
  }
  
}
</style>