uniapp自定义头部导航栏在页面整体滚动时固定在顶部

背景：我们要实现的是在uniapp中，使用uni-nav-bar组件定义自定义头部导航栏，但是在页面超出时，会带着头部导航栏一起滚动，以下代码实现头部导航栏固定在顶部，剩余内容正常滚动

1.使用uni-nav-bar的时候用一层view包裹，我们要操作的是这个view的高度
代码如下：

//头部
<view :style="{ height: statusBarHeights + 'px'}" class="BarColors">
	<uni-nav-bar title="我的" backgroundColor="transparent" :border='false' color="#000" left-icon="back" @clickLeft="back" class="unibarS">
	</uni-nav-bar>
</view>
//内容
<view class="cont-box">
...
</view>

2.在data中定义变量

<script>
	export default {
		data(){
			return{
				statusBarHeights:0,
				...
			}
		}
	}
</script>

2.在onLoad中定义并计算高度

onLoad(option) {
	let height = 0
	height = uni.getSystemInfoSync().statusBarHeight; //页面载入获取状态栏高度
	this.statusBarHeights = height + 50
}

3.在style中定义navbar高度并动态写入导航栏高度和内容区域高度

<style lang="scss" scoped>
	/deep/ .uni-navbar {
		position: absolute;
		top: 6.5vh;
		width: 100%;
	}

	/deep/ .uni-navbar__header-container-inner {
		font-size: 16px;
	}
	.BarColors {
		width: 100%;
		height: var(--status-bar-height); // --status-bar-height系统状态栏高度
		background-color: #BEE2F9;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.cont-box {
		position: absolute;
		top: calc(var(--status-bar-height) + 8.5vh);
		width: calc(100% - 1vw);
		// height: calc(100% - var(--status-bar-height) - 15vh);
		height: calc(100% - var(--status-bar-height) + 10px);
		padding: 0px 4vw;
		background: #fff;
	}
</style>