vue3实现下滑页面，导航栏上移消失，上滑下移显示

1.定义setup代码:
 

setup () {
    //点击箭头，滑动页面
    let scrollTop = ref('')
    let topsrcoll = ref(false)//上移样式成立
    let topage = () => {

    }
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    //监听页面滚动
    let handleScroll = () => {
      scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    }
    // 监听top值的变化
    watch(scrollTop, (newValue, oldValue) => {
      // 等新值大于100的时候再做变化（优化一下）
      console.log(newValue, oldValue)
      // 等新值大于100的时候再做变化（优化一下）
      if (newValue > 100) {
        if (newValue > oldValue) {
          console.log('向下滚动')
          topsrcoll.value = true
        } else {
          console.log('向上滚动')
          topsrcoll.value = false
        }
      }
    })

    // 暴露 state 到模板
    return {
      scrollTop,
      topage,
      topsrcoll
    }
  }

2.为dom结构绑定class样式：

<Header :class="topsrcoll ? 'top' : ''"></Header>

3.为css写样式：

.top {
  transform: translateY(-90px);
}
Header {
  position: fixed;
  z-index: 999;
  width: 100%;
  transition: all 0.5s;
}

 4。建议添加过度动画，使其更加流畅