当我在nuxt3中滚动时，我该如何隐藏纳维托（vue3）

Question

我正在使用NUXT3（VUE3） + Bootstrap来构建网站项目。我创建了两个组件（Barinfo和Navbar）。

当我滚动时，如何使栏信息隐藏，但是隐藏Barinfo后仍修复了Navbar？

<template>
  <div class="container">
    <div class="container h-25 navbar navbar-expand-lg bg-dark text-white" style="justify-content: space-between">
      <div class="infol"> Lundi - Vendredi, 7h30 à 19h / Samedi - J feriés, 8h à 12h</div>
      <div class="infor">Appelez nous sur &nbsp; 05 35 51 70 30</div>
    </div>
  </div>
</template>


<template>

 <div class="container">
    <nav class=" navbar  navbar-expand-lg top-navbar bg-light" >
      <div class="col-5">
        <a class="infol navbar-brand" href="/">
          <img src="/assets/images/logo.png" height="50" />
        </a>
      </div>

      <div class="col-7">
        <ul class="nav navbar-nav">

          <li class="nav-item">
            <NuxtLink class="nav-link" to="/">ACCEUIL</NuxtLink>
          </li>

          <li class="nav-item">
            <NuxtLink class="nav-link" to="/qui-sommes-nous">QUI SOMMES NOUS</NuxtLink>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="https://pubmed.ncbi.nlm.nih.gov/?term=biognach">PUBLICATIONS</a>
          </li>

          <li class="nav-item">
            <NuxtLink class="nav-link" to="/analyses">ANALYSES</NuxtLink>
          </li>

          <li class="nav-item">
            <NuxtLink class="nav-link" to="/contact">CONTACT</NuxtLink>
          </li>

          <li class="nav-item">
            <NuxtLink class="nav-link" to="/rendez-vous">
              <button type="button" class="btn btn-success">PRENDRE RENDEZ VOUS</button>
            </NuxtLink>
          </li>
        </ul>
      </div>
    </nav>
</div>

</template>

请你能帮我这样做