教大家如何使用第三方包实现浏览器头部导航吸顶功能的实现

学习目标: 使用组合式API实现重构吸顶功能

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

官网地址:useWindowScroll | VueUse

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

npm i @vueuse/core@5.3.0

第二步:在吸顶导航中使用  

// 当滚动距离大于等于78,添加类名显示
<div class="app-header-sticky" :class="{show:top >= 78}"></div>



<script>
import { useWindowScroll } from '@vueuse/core'
export default {
  name: 'AppHeaderSticky',
  setup () {
    // y表示具体顶部的滚动距离 会动态更新
    const { y: top } = useWindowScroll()
    return { top }
  }
}
</script>