uniAPP多标题滑动吸顶效果

<template>
	<view class="about">		
		<view class="lis">			
			 <view class="li" v-for="(item,index) in 5" :key="index">
				{{index}}
			 </view>
		</view>
		 <view :class="[(isFixedTop[0]) ? 'fixedTop' : '']" id="box" class="box">
		 	吸顶导航1{{isFixedTop[0]}}
		 </view>
		 <view class="lis">
		 	 <view class="li" v-for="(item,index) in 50" :key="index" @click="saoma()">
		 		{{index}}
		 	 </view>
		 </view>
		 <view :class="[(isFixedTop[1]) ? 'fixedTop' : '']" id="box" class="box">
		 	吸顶导航2
		 </view>
		 <view class="lis">
		 	 <view class="li" v-for="(item,index) in 50" :key="index">
		 		{{index}}{{isFixedTop[1]}}
		 	 </view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFixedTop:[],
				isFixedTop0:false,
				isFixedTop1:false,
				Topdistance:[],
				topHeight:"",
				mainTitle:''
			}
		},
		onLoad() { 
			uni.pageScrollTo({
				scrollTop:0,
				duration:0
			})
			setTimeout(()=>{
				this.GetTop()
			},1000)
			
		},
		onPageScroll(e) {
			const that = this
			// console.log(e.scrollTop,JSON.stringify(this.Topdistance),JSON.stringify(this.isFixedTop))
			// 
			
				for(let i = 0; i < this.Topdistance.length; i++){
					if(e.scrollTop > this.Topdistance[i]){
						// console.log('***************')
						this.isFixedTop[i] = true
						this.$set(this.isFixedTop,i,true)
						this.isFixedTop[i] = true
					}else{
						// console.log('++++++++++')
						this.isFixedTop[i] = false
						this.$set(this.isFixedTop,i,false)
						this.isFixedTop[i] = false
					}
				}
		},
		methods: { 
			GetTop(){
				var _this=this
				uni.getSystemInfo({
					success:(resu)=>{	
						console.log('resu',JSON.stringify(resu))
						const query = uni.createSelectorQuery().in(this)
						query.selectAll('.box').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res){
							console.log('res',JSON.stringify(res))
							_this.arr(res[0])
						})
					},
					fail:(res)=>{}
				})
			}, 
			arr(res){
				for(let i = 0; i < res.length; i++){
					this.Topdistance[i] = res[i].top
					this.isFixedTop[i] = false
				}
				console.log('----',JSON.stringify(this.Topdistance))
			},
			saoma(){
				
					uni.navigateTo({
						url:'./scan'
					})			
			}
			
		},
		
	}
</script>

<style>
	 .li{
		 height: 100upx;
		 line-height: 100upx;
		 margin-top: 20upx;
		 text-align: center;
		 color: #FFFFFF;
	 }
	 .lis :nth-child(3n+1){
		 opacity: 0.1;
		 background-color: #f00;
	 }
	 .lis :nth-child(3n+2){
		  opacity: 0.1;
	 	 background-color: #0f0;
	 }
	 .lis :nth-child(3n+3){
		  opacity: 0.1;
	 	 background-color: #00f;
	 }
	 .box{
		 height: 100upx;
		 line-height: 100upx; 
		 text-align: center;
		 background-color: #f0f;
		 color: #fff;
	 }
	 .fixedTop{
		 position: fixed;
		 top:0;
		 left: 0;
		 right: 0;
		 z-index: 9999999;
	 }
</style>