如何让滚动时，页面中间的筛选栏吸顶并且下方内容在页面滚动时不超过筛选栏与之重合？
页面是这样的：[图片] 我使用position: sticky来让筛选栏在页面滚动是吸顶，但是当我继续滚动时，下方内容会溢出到筛选栏位置： [图片] 怎么做才能让筛选栏下面的contentContainer在页面滚动时不溢出到上面去呢？ 页面结构: <!--pages/mine/mine.wxml-->
<view class="mainContainer">
<view class="titleContainer">
title
</view>
<view class="bodyContainer">
<view class="filterBarContainer">
<view class="filterBar">筛选栏1</view>
<view class="filterBar">筛选栏1</view>
<view class="filterBar">筛选栏1</view>
<view class="filterBar">筛选栏1</view>
<view class="filterBar">筛选栏1</view>
</view>
<view class="contentContainer">
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
<image src="/images/index-bg.jpg" mode="" />
</view>
</view>
</view>
样式: /* app.scss */
.mainContainer {
max-width: 100vw;
max-height: 100vh;
margin-bottom: 10vh;
display: flex;
flex-direction: column;
}
/* pages/mine/mine.wxss */
.titleContainer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 180rpx;
font-size: 200rpx;
font-weight: 10;
}
.mainContainer {
background: lightcyan;
}
.bodyContainer {
margin-bottom: 200rpx;
}
.filterBarContainer {
margin-bottom: 20rpx;
position: sticky;
top: 0;
left: 0;
background: rgba($color: lightgreen, $alpha: 0.6);
height: 60rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx 40rpx 20rpx 40rpx;
}
.contentContainer {
display: flex;
flex-direction: column;
align-items: center;
min-height: 200vh;
}
