头部吸顶效果(固定定位)-借用vueuse

1.手写实现

src\layout\components\headerSticky.vue

<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>

注意：添加的事件监听要记得移除！！！（因为是给window绑定的事件，不会销毁，造成内存泄漏 ）

2.借用vueuse

npm i @vueuse/core

src/components/app-header-sticky.vue

<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>

总结：

• @vueuse/core: 是配合vue3组合式API一起使用的一个第三方逻辑库。
• useWindowScroll() 是@vueuse/core提供的api，可返回当前页面滚动时候滚动条的 x（横向），y（纵向）坐标。
• vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装工具函数。