vue项目头部组件吸顶效果实现

1.手写实现 

<template>
  <div class="app-header-sticky" :class="{show: y>78}">
    <div class="container">
      <RouterLink class="logo" to="/" />

      <AppHeaderNav />

      <div class="right">
        <RouterLink to="/" >品牌</RouterLink>
        <RouterLink to="/" >专题</RouterLink>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue'
import AppHeaderNav from './header-nav'
export default {
  name: 'AppHeaderSticky',
  components: { AppHeaderNav },
  setup () {
    // 定义一个响应式数据
    const y = ref(0)
    const update = () => {
      y.value = document.documentElement.scrollTop
      console.log(y.value)
    }
    onMounted(() => { window.addEventListener('scroll', update) })
    onUnmounted(() => { window.removeEventListener('scroll', update) })

    return { y }
  }
}
</script>

在根元素上补充动态设置的class  

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

2.借用vueuse

2.1 安装

npm i @vueuse/core

2.2使用

<template>
  <div class="app-header-sticky" :class="{show:y>=78}">
    <div class="container" v-show="y>=78">
      <RouterLink class="logo" to="/" />
      <AppHeaderNav />
      <div class="left">
        <RouterLink to="/" >品牌</RouterLink>
        <RouterLink to="/" >专题</RouterLink>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeaderNav from './app-header-nav'
import { useWindowScroll } from '@vueuse/core'
export default {
  name: 'AppHeaderSticky',
  components: { AppHeaderNav },
  setup () {
    const { y } = useWindowScroll()
    return { y }
  }
}
</script>

3.总结

• @vueuse/core: 是配合vue3组合式API一起使用的一个第三方逻辑库。 必须知道的。

• useWindowScroll() 是@vueuse/core提供的api可返回当前页面滚动时候滚动条的 x横向，y纵向

• vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装好用的工具函数。