自定义头部时要求滚动离开头部后状态栏背景色是白色

 

 一般这要滚动离开这个头部后手机状态栏是透明的，要实现下面的效果：

首先我的头部高度并不是写死的，状态栏高度增加头部高度也跟着增加，背景那个图片是image标签写的，不是background-image

//状态栏盒子

// 自定义头部

    


//status_height是状态栏高度

js:
data(){
    return{
        statusflag:false
    }
},
onPageScroll(e) {
	let that = this
	const  query = uni.createSelectorQuery().in(this)
	console.log(e)
	query.select('.shop-bgimg').boundingClientRect(data=>{
		if(e.scrollTop>=data.height){  //当滚动高度大于头部高度，就让状态栏盒子出现
			that.statusflag = true
		}else{
			that.statusflag = false
		}
	}).exec()
},


css：
.status-box{
	background-color: #fff;
	width: 100vw;
	position: fixed;
	top: 0;
	z-index: 9;
}
.shop-bgimg{
	background-color: #fff;
	width: 100%;
	height: calc(var(--status_height) + 270rpx);
	//position: relative;
	image{
		width: 100vw;
		height: 100%;
	}
}