<template>
	<view class="scroll-change-nav-back">
		<template v-if="scrollRatio < 0.5">
			<view class="nav-default" :style="{ opacity: 1 - scrollRatio * 2 }">
				<slot name="default"></slot>
			</view>
		</template>
		<template v-if="scrollRatio >= 0.5">
			<view class="nav-scroll" :style="{ opacity: (scrollRatio - 0.5) * 2 }">
				<slot name="scroll"></slot>
			</view>
		</template>
	</view>
</template>

<script setup lang="ts">
defineProps({
	// 滚动值: 从 0 ~ 1
	scrollRatio: {
		type: Number,
		default: 0
	}
});
</script>

<script lang="ts">
export default {
	name: "ScrollChangeNavBack"
};
</script>

<style lang="scss" scoped>
.scroll-change-nav-back {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
}
</style>
