vue固定位置表示を実現

vue項目で吸頂効果を実現する.
例えば、ナビゲーションバーがページが一定の位置に下がった後、固定されない機能を実現します.
まず、mountedライフサイクル内で'scroll'イベントをリスニングするには、イベントがトリガーされた後、スクロールを処理する関数を実行します.
window.addEventListener('scroll', this.handleScroll)

   methods:{
handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  var offsetTop = document.querySelector('#searchBar').offsetTop
  if (scrollTop > offsetTop) {   //         
    this.searchBarFixed = true
  } else {
    this.searchBarFixed = false
  }
}
  }

完全なソースコードは次のとおりです.

  export default {
    components:{
     
    },
mounted () {
  window.addEventListener('scroll', this.handleScroll)
},
        data(){
          return {
            searchBarFixed:false
       
        } 
  },
   methods:{
handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  var offsetTop = document.querySelector('#searchBar').offsetTop
  if (scrollTop > offsetTop) {
    this.searchBarFixed = true
  } else {
    this.searchBarFixed = false
  }
},
  }
  }