页面是这样的：

我使用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;
}