分类导航的吸顶功能

目标： 使用 vueuse/core 重构吸顶功能

vueuse/core : 组合式API常用复用逻辑的集合

vueuse.org/core/useWin…

核心步骤

1.安装 @vueuse/core 包，它封装了常见的一些交互逻辑

    yarn add @vueuse/core
    或
    npm add @vueuse/core

2.在吸顶导航中使用

   <script setup lang="ts">
import AppHeaderNav from './app-header-nav.vue'
//第一步
import { useWindowScroll } from '@vueuse/core'
// 第二步，控制是否显示吸顶组件，有两个参数，x和y：表示x轴和y轴，都是自动ref响应式数据
const { y } = useWindowScroll()
</script>

<template>
//第三步，判断距离屏幕多少时吸顶
  <div class="app-header-sticky" :class="{ show: y >= 78 }">
     // ...
  </div>
</template>

<style>
// 此处为关键样式!!!
  // 默认情况下完全把自己移动到上面
  transform: translateY(-100%);
  // 完全透明
  opacity: 0;
  // 显示出来的类名
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
</style>