点击或滑到筛选导航的位置时 元素置顶 小于元素位置时取消置顶

<view v-if="isTopBox == 1" style="height: 110rpx;"></view>
<view :class="'tabTest ' + (isTopBox == 1 ? 'fixed' : '')" bindscroll="onPageScroll">
	<view v-for="(item,index) in tabArr" :key="index"
		:class="'tab-item ' + (currentTabTest == index ? 'actives' : '')" @tap="clickTab"
		:data-current="index">
		{{item}}
		<text></text>
	</view>
</view>

data() {
	return {
        isTopBox: 0,//是否置顶
        tabArr:["首页","附近","我的"],
        currentTabTest: 0,//当前选中项
        scrollTopNum: 0, //页面滚动的高度
        navbarTop: 0, //筛选导航到顶的距离
   };
},
methods: {
	setNarTop: function() {
		var self = this;
		var query = uni.createSelectorQuery().in(self)
		setTimeout(function() {
			query.select('.swiper-tabTest').boundingClientRect(res => {
				self.navbarTop = res.top; //筛选导航到顶的距离
			}).exec();
		}, 100);
	},
    //点击筛选导航
	clickTab: function(e) {
		var self = this;
		if (self.currentTabTest === e.currentTarget.dataset.current) {
			return false;
		} else {
			self.setFixed();
		}
	},
	setFixed: function() {
		var self = this;
		self.is_suoding = true;
		uni.pageScrollTo({
			scrollTop: self.navbarTop + 1,
			duration: 200 //滚动动画的时长
		});
	},
	onPageScroll: function(e) {
		var self = this;
		self.scrollTopNum = e.scrollTop;
		if (self.scrollTopNum >= self.navbarTop) {
			self.setData({
				isTopBox: 1,
			});
		} else {
			self.setData({
				isTopBox: 0,
			});
		}
	},
	//获取数据
	getData: function(callback) {
		var self = this;
		app.globalData.ajaxRequest(action, 'POST', param, function(ret) {
			if(ret.status == 1){
			//获取数据成功后获取筛选导航到顶的距离
					setTimeout(function(){
						self.setNarTop();
					},500);
				}
			}else{
				app.globalData.toast(ret.msg,1500,'none');
			}
		}, true);
	},
},

.tabTest{width: 100%;line-height: 70rpx;padding-top: 10rpx;padding-bottom:10rpx;margin-bottom: 10rpx;}
.fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 99;padding-left: 20rpx;padding-right: 20rpx;background: #fff;}
.tab-item{font-size: 30rpx;color: #333;display: inline-block;width:auto;padding: 0 25rpx;position: relative;}
.actives{font-size: 36rpx;}
.actives text{position: absolute;display: block;width: 50rpx;left: 50%;margin-left: -25rpx;bottom: 0;height: 8rpx;border-radius: 5rpx;background: #0354fa;}