目录

1 前言

2 具体步骤 

2.1 安装VueUse

2.2 吸顶导航组件中导入useScroll

2.3 在style中定义吸顶导航的两种状态

2.4 template中设置吸顶导航出现的时机

---

1 前言

本处使用VueUse更便捷的实现吸顶导航，具体内容及更多操作请看官网文档，如下：

useScroll | VueUse

2 具体步骤 

2.1 安装VueUse

在项目路径下的命令提示符窗口，输入如下指令：

npm i @vueuse/core

2.2 吸顶导航组件中导入useScroll

通过如下代码即可导入useScroll并获取纵坐标的值：

<script setup>
import { useScroll } from '@vueuse/core'    //导入useScroll
const {y} = useScroll(window)    //获取纵坐标的值
//其它代码
</script><template>
<!-- 其它代码 -->
</template><style scoped lang='scss'>
//其它代码
</style>

2.3 在style中定义吸顶导航的两种状态

<script setup>
import { useScroll } from '@vueuse/core'    //导入useScroll
const {y} = useScroll(window)    //获取纵坐标的值
//其它代码
</script><template><div class="app-header-sticky"><!-- 其它代码 --></div>
</template><style scoped lang='scss'>
.app-header-sticky {//其它代码// 吸顶导航状态// 状态一：往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 状态二：移除平移 + 完全不透明//&.show表示在父元素上添加show类时，以下样式将被应用&.show {transition: all 0.3s linear;    //元素会以0.3秒的时间以线性的速度过渡到不透明度为1的状态，transform: none;opacity: 1;}
}
</style>

2.4 template中设置吸顶导航出现的时机

这里就是当我们页面下划78的时候，原来的顶栏就看不到了，这时候我们的吸顶导航就该出现了。

<script setup>
import { useScroll } from '@vueuse/core'    //导入useScroll
const {y} = useScroll(window)    //获取纵坐标的值
//其它代码
</script><template><!-- 吸顶导航部分 --><div class="app-header-sticky" :class="{show: y > 78}"><!-- 其它代码 --></div>
</template><style scoped lang='scss'>
.app-header-sticky {//其它代码// 吸顶导航状态// 状态一：往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 状态二：移除平移 + 完全不透明//&.show表示在父元素上添加show类时，以下样式将被应用&.show {transition: all 0.3s linear;    //元素会以0.3秒的时间以线性的速度过渡到不透明度为1的状态，transform: none;opacity: 1;}
}
</style>