html代码

  <view class="content">
  top-content
  </view>
  <view class="container1">
    container1
  </view>
  <view class="container2">
    container2
  </view>
  <view class="container3">
    container3
  </view>

css

.content {
  height: 1000rpx;
}
.container1{
  padding: 500rpx 40rpx;
  background-color: plum;
  position: relative;
}

.container1::after {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  height: 2rpx;
  background-color: red;
  top: 50%;
}

.container2{
  padding: 500rpx 40rpx;
  background-color: papayawhip;
}

.container3{
  padding: 500rpx 40rpx;
  background-color: palegoldenrod;
}

js

Page({
localData: {
    navigateBarHeight: 0
  },
 onShow(){
    // this.checkPosition();
    this.getSystemInfo();
  },
getSystemInfo() {
    // 获取系统信息
    const system = wx.getSystemInfoSync()
    // 获取胶囊信息
    const menu = wx.getMenuButtonBoundingClientRect();
    const navigateBar = (menu.top - system.statusBarHeight) * 2 + menu.height;
    console.log(system,menu,navigateBar)
    this.localData.navigateBarHeight = navigateBar; //胶囊导航栏高度 (包括胶囊高度和胶囊上下边距)
    this.localData.menuHeight = system.statusBarHeight //状态栏高度
    this.localData.topHeight = navigateBar + (system.statusBarHeight / 2)
  },
  checkPosition(){
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    const query = wx.createSelectorQuery();
    query.select(".container1").boundingClientRect().exec((res)=>{
      const {top,bottom,height} = res[0];
      console.log(top,bottom,height,windowHeight)
      // if(top > windowHeight || top-this.localData.navigateBarHeight  > windowHeight/2 || bottom < 0 || (bottom > 0 && bottom + this.localData.navigateBarHeight < windowHeight/2)) { //露出超1/2
      if(top > windowHeight || top-this.localData.navigateBarHeight + height  > windowHeight || bottom < 0 || (bottom > 0 && bottom < height)) { //全部露出
        console.log('隐藏');
      }else {
        console.log('露出');
      }
    })
  },
  onPageScroll(){
    this.checkPosition();
  },
})