VUE3----- 吸顶

VUE3----- 吸顶

---

引用插件：
1. npm i @vueuse/core
2. import { useWindowScroll } from '@vueuse/core'
3.  // xy响应式的 x代表横轴滚动距离 y纵轴滚动距离
    const {x,y} = useWindowScroll()

---

一、吸顶交互

监听滚动条事件

1. 监听滚动条，返回移动的高度

// y表示具体顶部的滚动距离 会动态更新
    const { h } = useWindowScroll()
    return { h }

2. 根据固定的高度，决定组件的显隐。

window.addEventListener('scroll',()=>{
   if(h>78){
      this.showFlag = true
   }else{
      this.showFlag = false
   }
})