大佬们，往上滑时某个区域缩小，往下滑时还原当前区域的模块该如何实现啊？

这是测试代码。

<script setup lang="ts"></script>

<template>
  <div class="container1">
    <div class="video">
      <video
        id="exercise-video"
        autoplay
        x-webkit-airplay="true"
        webkit-playsinline=""
        playsinline="true"
        class="video-video"
        loop
        src="https://static1.keepcdn.com/cms_static/video/2022/3/9/1646795217972_JUU4JUIwJTgzJUU4.mp4"
      />
      <div class="title">测试</div>
    </div>
    <div class="content">
      <h2 class="name">仰卧交替抬腿</h2>
      <div class="ex-open-wrapper"><div class="ex-open-btn">我也要练</div></div>
      <div class="ex-divider" />
      <pre><h4>步骤</h4><ul><li>仰卧在瑜伽垫上，下背部用力贴紧地面，双腿伸直，勾起脚尖</li><li>双腿交替抬起落下</li></ul><h4>呼吸</h4><ul><li>全程保持均匀呼吸</li></ul><h4>动作感觉</h4><ul><li>整个腹肌始终保持紧绷感，动作持续越久，腹肌灼烧感越强</li></ul><p><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_front?v=202603021423" alt="front"/><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_back?v=202603021423" alt="back"/></p><h4>常见错误</h4><ul><li>错误：为追求动作快而摆动身体，导致腿部肌肉感觉变强</li><li>解决：减小动作幅度，保证上身固定</li></ul></pre>
      <h4>细节图示</h4>
      <div class="detail-wrapper clearfix">
        <div class="detail">
          <div class="img">
            <img
              src="https://static1.keepcdn.com/picture/frame/1501124459487.jpg"
            /><i style="top: 67%; left: 38%" /><i
              style="top: 37%; left: 66%"
            /><i style="top: 63%; left: 28.000000000000004%" />
          </div>
          <ol>
            <li>腰部贴地</li>
            <li>双腿伸直，勾起脚尖</li>
            <li>双肩离地</li>
          </ol>
        </div>
      </div>
      <h2 class="name">仰卧交替抬腿</h2>
      <div class="ex-open-wrapper"><div class="ex-open-btn">我也要练</div></div>
      <div class="ex-divider" />
      <pre><h4>步骤</h4><ul><li>仰卧在瑜伽垫上，下背部用力贴紧地面，双腿伸直，勾起脚尖</li><li>双腿交替抬起落下</li></ul><h4>呼吸</h4><ul><li>全程保持均匀呼吸</li></ul><h4>动作感觉</h4><ul><li>整个腹肌始终保持紧绷感，动作持续越久，腹肌灼烧感越强</li></ul><p><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_front?v=202603021423" alt="front"/><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_back?v=202603021423" alt="back"/></p><h4>常见错误</h4><ul><li>错误：为追求动作快而摆动身体，导致腿部肌肉感觉变强</li><li>解决：减小动作幅度，保证上身固定</li></ul></pre>
      <h4>细节图示</h4>
      <div class="detail-wrapper clearfix">
        <div class="detail">
          <div class="img">
            <img
              src="https://static1.keepcdn.com/picture/frame/1501124459487.jpg"
            /><i style="top: 67%; left: 38%" /><i
              style="top: 37%; left: 66%"
            /><i style="top: 63%; left: 28.000000000000004%" />
          </div>
          <ol>
            <li>腰部贴地</li>
            <li>双腿伸直，勾起脚尖</li>
            <li>双肩离地</li>
          </ol>
        </div>
      </div>
      <h2 class="name">仰卧交替抬腿</h2>
      <div class="ex-open-wrapper"><div class="ex-open-btn">我也要练</div></div>
      <div class="ex-divider" />
      <pre><h4>步骤</h4><ul><li>仰卧在瑜伽垫上，下背部用力贴紧地面，双腿伸直，勾起脚尖</li><li>双腿交替抬起落下</li></ul><h4>呼吸</h4><ul><li>全程保持均匀呼吸</li></ul><h4>动作感觉</h4><ul><li>整个腹肌始终保持紧绷感，动作持续越久，腹肌灼烧感越强</li></ul><p><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_front?v=202603021423" alt="front"/><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_back?v=202603021423" alt="back"/></p><h4>常见错误</h4><ul><li>错误：为追求动作快而摆动身体，导致腿部肌肉感觉变强</li><li>解决：减小动作幅度，保证上身固定</li></ul></pre>
      <h4>细节图示</h4>
      <div class="detail-wrapper clearfix">
        <div class="detail">
          <div class="img">
            <img
              src="https://static1.keepcdn.com/picture/frame/1501124459487.jpg"
            /><i style="top: 67%; left: 38%" /><i
              style="top: 37%; left: 66%"
            /><i style="top: 63%; left: 28.000000000000004%" />
          </div>
          <ol>
            <li>腰部贴地</li>
            <li>双腿伸直，勾起脚尖</li>
            <li>双肩离地</li>
          </ol>
        </div>
      </div>
      <h2 class="name">仰卧交替抬腿</h2>
      <div class="ex-open-wrapper"><div class="ex-open-btn">我也要练</div></div>
      <div class="ex-divider" />
      <pre><h4>步骤</h4><ul><li>仰卧在瑜伽垫上，下背部用力贴紧地面，双腿伸直，勾起脚尖</li><li>双腿交替抬起落下</li></ul><h4>呼吸</h4><ul><li>全程保持均匀呼吸</li></ul><h4>动作感觉</h4><ul><li>整个腹肌始终保持紧绷感，动作持续越久，腹肌灼烧感越强</li></ul><p><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_front?v=202603021423" alt="front"/><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_back?v=202603021423" alt="back"/></p><h4>常见错误</h4><ul><li>错误：为追求动作快而摆动身体，导致腿部肌肉感觉变强</li><li>解决：减小动作幅度，保证上身固定</li></ul></pre>
      <h4>细节图示</h4>
      <div class="detail-wrapper clearfix">
        <div class="detail">
          <div class="img">
            <img
              src="https://static1.keepcdn.com/picture/frame/1501124459487.jpg"
            /><i style="top: 67%; left: 38%" /><i
              style="top: 37%; left: 66%"
            /><i style="top: 63%; left: 28.000000000000004%" />
          </div>
          <ol>
            <li>腰部贴地</li>
            <li>双腿伸直，勾起脚尖</li>
            <li>双肩离地</li>
          </ol>
        </div>
      </div>
      <h2 class="name">仰卧交替抬腿</h2>
      <div class="ex-open-wrapper"><div class="ex-open-btn">我也要练</div></div>
      <div class="ex-divider" />
      <pre><h4>步骤</h4><ul><li>仰卧在瑜伽垫上，下背部用力贴紧地面，双腿伸直，勾起脚尖</li><li>双腿交替抬起落下</li></ul><h4>呼吸</h4><ul><li>全程保持均匀呼吸</li></ul><h4>动作感觉</h4><ul><li>整个腹肌始终保持紧绷感，动作持续越久，腹肌灼烧感越强</li></ul><p><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_front?v=202603021423" alt="front"/><img onerror="this.style.display='none'" src="https://static1.keepcdn.com/picture/exerciseimages/v2/55cc42fa621a394b36189195_male_back?v=202603021423" alt="back"/></p><h4>常见错误</h4><ul><li>错误：为追求动作快而摆动身体，导致腿部肌肉感觉变强</li><li>解决：减小动作幅度，保证上身固定</li></ul></pre>
      <h4>细节图示</h4>
      <div class="detail-wrapper clearfix">
        <div class="detail">
          <div class="img">
            <img
              src="https://static1.keepcdn.com/picture/frame/1501124459487.jpg"
            /><i style="top: 67%; left: 38%" /><i
              style="top: 37%; left: 66%"
            /><i style="top: 63%; left: 28.000000000000004%" />
          </div>
          <ol>
            <li>腰部贴地</li>
            <li>双腿伸直，勾起脚尖</li>
            <li>双肩离地</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container1 {
  margin: 0 auto;
  max-width: 789px;
  .video {
    background-color: #fff;
    position: sticky;
    top: 0;
    .exercise-video {
      height: calc(var(12.71px, 1vh) * 30);
      transition: height 0.3s;
      video {
        width: 100%;
        height: 100%;
      }
    }
    z-index: 1;
    .title {
      font-size: 24px;
      font-weight: bold;
      padding-top: 10px;
      padding-bottom: 5px;
    }
  }
  .content {
    img {
      max-width: 120px;
    }
  }
}
</style>