交互要求
- 滚动距离大于等于78个px的时候，组件会在顶部固定定位
- 滚动距离小于78个px的时候，组件消失隐藏
实现思路
- 准备一个吸顶组件，准备一个类名，控制显示隐藏
- 监听页面滚动，判断滚动距离，距离大于78px添加类名
核心代码：
（1）新建吸顶导航组件src/Layout/components/app-header-sticky.vue
<script lang="ts" setup name="AppHeaderSticky"> import AppHeaderNav from './app-header-nav.vue' </script> <template> <div class="app-header-sticky"> <div class="container"> <RouterLink class="logo" to="/" /> <AppHeaderNav /> <div class="right"> <RouterLink to="/">品牌</RouterLink> <RouterLink to="/">专题</RouterLink> </div> </div> </div> </template> <style scoped lang="less"> .app-header-sticky { width: 100%; height: 80px; position: fixed; left: 0; top: 0; z-index: 999; background-color: #fff; border-bottom: 1px solid #e4e4e4; .container { display: flex; align-items: center; } .logo { width: 200px; height: 80px; background: url(@/assets/images/logo.png) no-repeat right 2px; background-size: 160px auto; } .right { width: 220px; display: flex; text-align: center; padding-left: 40px; border-left: 2px solid @xtxColor; a { width: 38px; margin-right: 40px; font-size: 16px; line-height: 1; &:hover { color: @xtxColor; } } } } </style>
（2）Layout首页引入吸顶导航组件
<script lang="ts" setup> import AppTopnav from './components/app-topnav.vue' import AppHeader from './components/app-header.vue' import AppFooter from './components/app-footer.vue' +import AppHeaderSticky from './components/app-header-sticky.vue' </script> <template> <AppTopnav></AppTopnav> <AppHeader></AppHeader> + <AppHeaderSticky></AppHeaderSticky> <div class="app-body"> <!-- 路由出口 --> <RouterView></RouterView> </div> <AppFooter></AppFooter> </template> <style lang="less" scoped> .app-body { min-height: 600px; } </style>
（3）提供样式，控制sticky的显示和隐藏
.app-header-sticky { width: 100%; height: 80px; position: fixed; left: 0; top: 0; z-index: 999; background-color: #fff; border-bottom: 1px solid #e4e4e4; + transform: translateY(-100%); + &.show { + transition: all 0.3s linear; + transform: translateY(0%); + }
（4）给window注册scroll事件，获取滚动距离
<script lang="ts" setup> import { onBeforeUnmount, onMounted, ref } from 'vue' import AppHeaderNav from './app-header-nav.vue' const y = ref(0) const onScroll = () => { y.value = document.documentElement.scrollTop } onMounted(() => { window.addEventListener('scroll', onScroll) }) onBeforeUnmount(() => { window.removeEventListener('scroll', onScroll) }) </script>
（5）控制sticky的显示和隐藏
<div class="app-header-sticky" :class="{show:y >= 78}">
（6）修复bug，为了吸顶头部的内容不遮住不吸顶的头部。
<div class="container" v-show="y >= 78">
也可以使用185px，正好原有的header全部消失时候展示吸顶的header
头部分类导航-吸顶重构
vueuse/core : 组合式API常用复用逻辑的集合
目标： 使用 vueuse/core 重构吸顶功能
核心步骤
（1）安装@vueuse/core 包，它封装了常见的一些交互逻辑
yarn add @vueuse/core
（2）在吸顶导航中使用
src/components/app-header-sticky.vue
<script lang="ts" setup> import AppHeaderNav from './app-header-nav.vue' // import { onBeforeUnmount, onMounted, ref } from 'vue' import { useWindowScroll } from '@vueuse/core' // const y = ref(0) // const onScroll = () => { // y.value = document.documentElement.scrollTop // } // onMounted(() => { // window.addEventListener('scroll', onScroll) // }) // onBeforeUnmount(() => { // window.removeEventListener('scroll', onScroll) // }) // 控制是否显示吸顶组件 const { y } = useWindowScroll() </script>
