Vue3实现吸顶导航功能

背景

需要实现当浏览器上下滚动时，若距离顶部的滚动距离大于78px，吸顶导航显示，小于78px隐藏。

实现

使用vueuse插件中的useScroll方法​​​​​​​和动态类名控制进行实现

1. 安装 vueuse组件

npm i @vueuse/core

2. 导入

import { useScroll } from '@vueuse/core'
 
const { y } = useScroll(window)    //函数中 是基于什么对象进行滚动，本次 基于window进行滚动

3. 根据y的值来判断
   这里的show属性能够决定该div块是否显示，这里利用y的值，当滚动距离大于78px时候，就给改div加上show属性，使其显示。

<div class="app-header-sticky" :class="{ show: y > 78 }">

<div>