uniapp自定义导航栏组件随着页面滚动消失

HTML：组件部分

<template>
    <!-- #ifdef MP-WEIXIN -->
    <view class="top-nav"
        :style="{    
            opacity:transparency
        }"
    >
        <text class="iconfont icon-fanhui1" v-if="show"></text>
        <text class="hz-title">{{hztitle}}</text>
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view class="top-nav">
        <text class="iconfont icon-fanhui" v-if="show" @click="goBack"></text>
        <text class="hz-title">{{hztitle}}</text>
    </view>
    <!-- #endif -->
</template>

<style lang="scss">
    .top-nav {
        width: 100%;
        height: 112rpx;
        background-color: #FFFFFF;
        box-sizing: border-box;
        position: fixed;
        top: 0rpx;
        left: 0rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        .hz-title {
            width: calc(100% - 16rpx);
            text-align: center;
        }
    }
</style>

JS：

<script>
    export default {
        props: {
            
            show:{
                type:Boolean,
                default:false
            },
            transparency:{
                type:Number,
                default:1
            }
        },
        data() {
            return {
                
            }
        },
        methods: {
            
        }

    }
</script>

//调用组件
<hz-nav :transparency="opacityNum"></hz-nav>

在调用组件页面添加函数：

<script>
    export default {
        data() {
            return {
                opacityNum: 1,
            }
        },
        onLoad() {

        },
        methods: {
            onPageScroll(res) {
                let scrollTop = res.scrollTop;
                if (scrollTop <= 20) {
                    this.opacityNum = 1
                } else if (scrollTop > 20 && scrollTop < 100) {
                    this.opacityNum = 1 - scrollTop / 100
                } else {
                    this.opacityNum = 0
                }
            }
        },
        computed: {

        }
    }
</script>