HarmonyOS 鸿蒙Next二级吸顶如何实现

我的方法就没有你那么优雅了，我是通过控制HEADER1的显隐来达到吸顶的效果的，还是你的方法好！

@Entry
@Component
struct ScrollCeiling {
  scroller: Scroller = new Scroller()
  itemData: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  tabTitles: Array<string> = ['Tab1', 'Tab2', 'Tab3']
  isFirstChange: boolean = false;
  maxDistance: number = 0; // Tabs和标题栏的最大距离
  minGlobalY: number = 89.6923076923077; // Tabs距离屏幕顶部的最小距离，该距离=标题栏+状态栏
  @State isCeiled: boolean = false; // Tabs是否是吸顶状态
  @State titleBarAlpha: number = 0;

  @Builder
  tabContentData(tabTitle: string) {
    TabContent() {
      List() {
        ForEach(this.itemData, (item: number) => {
          ListItem() {
            Text(`${item}`)
              .height(80)
              .width('100%')
              .textAlign(TextAlign.Center)
              .backgroundColor(0xDDDDDD)
              .margin({ bottom: 5 })
          }
        })
      }
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    }.tabBar(tabTitle)
    .padding({ top: 5, bottom: 5 })
    .borderWidth(1)
    .borderColor(Color.Red)
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Image($r('app.media.bear'))
      Column() {
        Stack() {
          Column()
            .width('100%')
            .height(50)
            .backgroundColor('#99ff00ff')
            .opacity(this.titleBarAlpha)
          Text('标题栏')
            .textAlign(TextAlign.Center)
            .width('100%')
            .height(50)
        }
        .borderWidth(1)
        .borderColor('#99ff00')

        Scroll(this.scroller) {
          Column() {
            Image($r('app.media.app_icon')).height(70)
            Text('HEADER')
              .textAlign(TextAlign.Center)
              .width('100%')
              .backgroundColor('#00ff00')
              .height(50)
            Image($r('app.media.app_icon')).height(70)

            Stack({ alignContent: Alignment.TopStart }) {
              Tabs() {
                ForEach(this.tabTitles, (title: string) => {
                  this.tabContentData(title)
                })
              }
              .padding({ top: this.isCeiled ? 50 : 0 })
              .borderWidth(2)
              .onAreaChange((oldArea, newArea) => {
                console.log('newArea.position:' + newArea.globalPosition.y)
                if (!this.isFirstChange) {
                  this.isFirstChange = true;
                  this.maxDistance = Number(newArea.globalPosition.y) - this.minGlobalY;
                }
                this.titleBarAlpha = 1 - ((Number(newArea.globalPosition.y) - this.minGlobalY) / this.maxDistance);
                console.log('alpha:' + this.titleBarAlpha)
                this.isCeiled = this.minGlobalY === newArea.globalPosition.y;
              })

              Text('HEADER')
                .textAlign(TextAlign.Center)
                .width('100%')
                .backgroundColor('#00ff00')
                .height(50)
                .visibility(this.isCeiled ? Visibility.Visible : Visibility.None)
            }
          }
          .width('100%')
          .alignItems(HorizontalAlign.Center)
        }
        .width('100%')
        .align(Alignment.Center)
        .scrollBar(BarState.Off)
      }
    }
  }
}