获取距离的id元素和添加样式的元素可以是包含关系也可以是并列关系

<div id='testNavBar'>
	<div :class='{ fixedNavbar: isfixTab }'>这是导航</div>
</div>
或
<div id='testNavBar'></div>
<div :class='{ fixedNavbar: isfixTab }'>这是导航</div>

方法：

data () {
    return {
    	isfixTab: false
    }
},

methods: {

	// 先分别获得id为testNavBar的元素距离顶部的距离和页面滚动的距离
	// 比较他们的大小来确定是否添加fixedNavbar样式
    handleTabFix() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#testNavBar').offsetTop
      scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
    }
    
},

// 监听页面滚动
mounted () {
    window.addEventListener('scroll', this.handleTabFix, true)
},

//离开当前组件前一定要清除滚动监听，否则进入其他路由会报错
beforeRouteLeave (to, from, next) {
   window.removeEventListener('scroll', this.handleTabFix, true)
   next()
}

样式：

.fixedNavbar{
    position: fixed;
    top: 2.25rem;
    left: 0;
    width: 100%;
    border-top: 0.05rem solid #f5f5f5;
    border-bottom: 0.05rem solid #f5f5f5;
    background: #f5f5f5;
}