吸顶导航（滚动一定距离后显示另一个导航）

1.先写出第二个导航头部，设置往上位移自身高度的百分百，并设置为透明；

.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;
}

 2.新增一个类名show，这个类名表示需要显示时的样式；

// 状态二：移除平移 + 完全不透明、
.show {
transition: all 0.3s linear;
transform: none;
opacity: 1;
}

3.在html中使用这个类名，这时两个导航都会显示在页面上；

 4.进入VueUse官网，安装vueuse，Get Started | VueUse

npm i @vueuse/core

5.在新建的吸顶导航中使用vueuse；

<script setup>
import { useScroll } from '@vueuse/core'

const { y } = useScroll(window)
</script>

6.把类名修改为动态属性，并设置合适的滚动距离，一下代码为当y大于78时显示这个吸顶导航。