uniapp导航栏固定和区域滚动的问题

效果图和源代码：

<template>
	<view class="container">
		<view class="top" style="height: 8%; margin-bottom: 20rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);">
			<view class="box" style="flex: 1; background-color: #4CAF50; display: flex;"
				@click="toUrl(`/pages/menstore/shouyin`)">
				<text
					style="color: white; font-size: 14px; text-align: center; line-height: 50px; font-size: 40rpx; font-weight: 600; margin-left: 30rpx;">取消Esc</text>
			</view>
			<view class="box" style="flex: 2; background-color: #4CAF50;">
				<view class="inner-box"
					style=" margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<text
						style="color: white; font-size: 14px; text-align: center; line-height: 50px; font-size: 50rpx; font-weight: 600; margin-right: 900rpx;">门店管理中心</text>
				</view>
			</view>
		</view>
		<view class="bottom" style="height: 92% margin-bottom: 10rpx;">
			<view class="left"
				style="width: 10%; margin-right: 10rpx; margin-left: 10rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); margin-bottom: 10rpx;">
				<view style="background-color: white;">
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/index`)">
						<image src="../../../static/shouyeye.png"
							style="width: 60rpx; height: 60rpx; margin-left: -100rpx; "></image>
						<view style="font-weight: 600; margin-left: 20rpx;">首页</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/employee`)">
						<image src="../../../static/yuangongguanli.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx; "></image>
						<view style="font-weight: 600; margin-left: 20rpx;">员工管理</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/cashOut`)">
						<image src="../../../static/tixianzhanghu.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">提现账户</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/stock`)">
						<image src="../../../static/shangpinkucun.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">商品库存</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/deliveryUser`)">
						<image src="../../../static/配送管理.png" style="width: 60rpx; height: 60rpx; margin-left: -60rpx;">
						</image>
						<view