小程序到固定元素后tab切换固定顶部

图一变为图二

第一步：首页记录滚动到的元素距离顶部的位置

uni.createSelectorQuery().selectAll('#fix').boundingClientRect(function(res){

that.position=res[0].top

that.isGetPosition=1;

}).exec();

第二步：在小程序的滚动事件添加记录是否到达位置

onPageScroll(e){

var that= this;

//直接写入onload无法获取位置信息

  if(that.isGetPosition!=1){

uni.createSelectorQuery().selectAll('#fix').boundingClientRect(function(res){

console.log(res)

that.position=res[0].top

that.isGetPosition=1;

}).exec();

}

if(that.position&&e.scrollTop>=that.position){

that.fix=1;

}else if(that.position&&e.scrollTop

that.fix=0;

}

},

第三步：根据记录对需要固定头部的设置不同类名设置

:class="[fix==1 ? 'search-box-fix' : 'search-box']"

对应css设置

.search-box{padding:20upx;display:flex;align-items:center;

&.search-box-fix{position:fixed;top:0;background:#FFFFFF;padding:20upx;width:710upx;z-index:999999;}