导航栏组件

设计思路：

将原先的导航栏进行隐藏，将需要新的导航栏进行条件展示

<script setup>
//vueuse
import {useScroll} from '@vueuse/core'
</script><style scoped lang='scss'>
.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;// 状态二：移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url("@/assets/images/logo.png") no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid $xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: $xtxColor;}}}
}
</style>

 安装依赖(用于计算滚动的距离)

npm i @vueuse/core 

使用vueuse进行计算数据，并且进行条件展示

使用css样式，当y滚动条大于78时进行展示 

<template><div class="app-header-sticky" :class="{show: y > 78}"><div class="container"><RouterLink class="logo" to="/" /></div></div>
</template>