Vue3系列–基于第三方使用组合式API实现吸顶功能

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

npm i @vueuse/core@5.3.0 //这里一定要注意锁定版本，因为最新版本里面有一些内容与项目不兼容
复制代码

2）在吸顶导航中使用src/components/header-sticky.vue

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

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

除了使用第三方来实现吸顶功能之外，我们也可以通过原生的方法来实现，这里也给出代码供大家参考：

1）首先，我们新建吸顶导航组件src/layout/components/header-sticky.vue
2）Layout(这里根据你自己的项目，在对应组件里)首页引入吸顶导航组件

<template>
  <!-- 顶部通栏组件 -->
  <TopNav />
  <!-- header区域 -->
  <Header />
  <!-- 吸顶组件 -->
  <HeaderSticky/>
  <main>
    <!-- 二级路由出口 -->
    <router-view></router-view>
  </main>
  <!-- 底部footer -->
  <Footer/>
</template>

<script>
import TopNav from './components/top-nav'
import Header from './components/header'
import Footer from './components/footer'
import HeaderSticky from '@/components/header-sticky'
export default {
  name: 'XtxLayout',
  components: { AppTopnav, AppHeader, AppFooter, HeaderSticky  }
}
</script>
复制代码

3）在滚动到78px完成显示效果（添加类名）

通过滚动事件的触发，在回调函数里判断当前是否已经滚动了78px(这里的78是因为我这个项目的顶部导航栏高度是78，根据自己的项目来确定)，如果大于则添加类名，否则移除类名

1. document.documentElement.scrollTop 获取滚动距离
2. :class 动态控制类名显示

.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4
  
  //这里的做法就是让这个header位于整个导航栏的上边，然后隐藏 然后通过一个动画再下来
  transform: translateY(-100%);
  opacity: 0;
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
复制代码

通过控制滚动距离，动态添加类名

import TopNavCommon from '@/components/top-nav-common'
export default {
  name: 'AppHeaderSticky',
  components: { TopNavCommon },
  setup () {
    const top = ref(0)
      window.onscroll = () => {
        const scrollTop = document.documentElement.scrollTop
        top.value = scrollTop
      }
    return { top }
  }
}
复制代码

<template>
  <div class="app-header-sticky" :class='{show: top>=78}'>
    <div class="container" v-if='top>=78'>
复制代码

总结：

1. 默认让组件出现在页面的顶部，可视区之外
2. 当页面滚动的距离超过78px时，添加一个类名，该类名控制吸顶组件显示出来