<template>
	<view class="about">		
		<view class="lis">			
			 <view class="li" v-for="(item,index) in 100" :key="index">
				{{index}}
			 </view>
		</view>
		<!-- :style="{top:topHeight+‘upx‘}" -->
		 <view :class="[(isFixedTop) ? ‘fixedTop‘ : ‘‘]" id="box" class="box">
		 	吸顶导航
		 </view>
		 <view class="lis">
		 	 <view class="li" v-for="(item,index) in 50" :key="index">
		 		{{index}}
		 	 </view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFixedTop:false,
				Topdistance:3000,
				topHeight:"",
			}
		},
		onLoad() { 
			uni.pageScrollTo({
				scrollTop:0,
				duration:0
			})
			setTimeout(()=>{
				this.GetTop()
				// this.aaa()
			},1000)
		},
		onPageScroll(e) {
			console.log(e.scrollTop)
			if(e.scrollTop > this.Topdistance){
				this.isFixedTop=true
			}else{
				this.isFixedTop=false
			}
		},
		methods: { 
			aaa(){			 
				uni.createSelectorQuery().in(this).select(‘.uni-page-head‘).boundingClientRect(result => {
					 if (result) { 
						this.topHeight=result.height * 2
						console.log(this.topHeight)
					}else { 
						 
					} 
				 }).exec(); 			 
			},	
			GetTop(){
				//获取元素距离顶部的距离
				var _this=this
				uni.getSystemInfo({
					success:(resu)=>{	
						console.log(resu)
						const query = uni.createSelectorQuery()
						query.select(‘#box‘).boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res){
							_this.Topdistance=res[0].top
							console.log(res)
						})
					},
					fail:(res)=>{}
				})
			}, 
			
		}
		
	}
</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>