uniapp首页搜索框滚动到导航栏效果

<template>
	<view class="u-rela">
		<u-navbar :is-back="false"  title=" " :border-bottom="false"  :background="{backgroundImage: BackNavColor}"></u-navbar>
		<view class="content">
			<image src="https://jiuyi-resource.oss-cn-beijing.aliyuncs.com/icon/wechatApplet/indexBG.png" style="width: 750rpx;height: 423rpx;"></image>
		</view>
		<view class="u-rela">
			<view class="search u-flex u-p-l-20 u-font-28" :style="{ top: statusBarHeight + 6 + 'px',width: searchWidth + 'rpx' }">请输入关键词</view>
			<view class="u-p-20">
				<view class="u-m-b-10" v-for="(item,index) in 100" :key="index">
					搜索框动画
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				BackNavColor: 'transparent',
				statusBarHeight: systemInfo.statusBarHeight,
				searchWidth: 710
			}
		},
		onPageScroll: function(e) {
			let scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
			if (scrollTop > 0) {
				this.searchWidth =  scrollTop < 50 ? 710 - (Number(scrollTop) * 4.5) : scrollTop > 50 ? 710 - 50 * 4.5 : this.searchWidth
				this.BackNavColor = `linear-gradient(90deg, rgba(67,134,240,${Number(scrollTop)/10}), rgba(137,162,227,${Number(scrollTop)/10}))`
			}
			if (scrollTop == 0) {
				this.searchWidth = ''
				this.BackNavColor = 'transparent'
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
.content{ position: fixed; width: 100%; top: 0; }
.index2{ z-index: 2; }
.search{ background: #ffffff; height: 60rpx; border-radius: 30px; margin: 0 20rpx; position: relative; z-index: 999; position: sticky; color: #999999;}
</style>

效果展示