uniapp吸顶功能

<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>