孤單的是人拉鹃，寂寞的是心。

這只是我寫的一個(gè)簡(jiǎn)單的demo,但是所需數(shù)據(jù)與邏輯已走通, 拿走就能用的那種,希望你能看完

<template>
    <div>
        <div class="nav"></div>
        <div class="searchBar" ref="searchBar" style="width:100px;height:100px;overflow:scroll">
            <ul :class="searchBarFixed == true ? 'isFixed' :''"> 
                <li>區(qū)域<i class="iconfont icon-jiantouxia"></i></li>
                <li>價(jià)格<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
      // 監(jiān)聽(tīng)這個(gè)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>

再此附上我的QQ: 2489757828 有問(wèn)題的話可以共同探討
我的私人博客: 李大玄