頭部分類導(dǎo)航-吸頂功能

電商網(wǎng)站的首頁內(nèi)容會(huì)比較多，頁面比較長，為了能讓用戶在滾動(dòng)瀏覽內(nèi)容的過程中都能夠快速的切換到其它分類。需要分類導(dǎo)航一直可見，所以需要一個(gè)吸頂導(dǎo)航的效果。

目標(biāo):完成頭部組件吸頂效果的實(shí)現(xiàn)

交互要求

1. 滾動(dòng)距離大于等于78個(gè)px的時(shí)候，組件會(huì)在頂部固定定位
2. 滾動(dòng)距離小于78個(gè)px的時(shí)候，組件消失隱藏

實(shí)現(xiàn)思路

1. 準(zhǔn)備一個(gè)吸頂組件，準(zhǔn)備一個(gè)類名，控制顯示隱藏
2. 監(jiān)聽頁面滾動(dòng)，判斷滾動(dòng)距離，距離大于78px添加類名

核心代碼：

（1）新建吸頂導(dǎo)航組件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首頁引入吸頂導(dǎo)航組件

<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事件，獲取滾動(dòng)距離

<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）修復(fù)bug，為了吸頂頭部的內(nèi)容不遮住不吸頂?shù)念^部。

<div class="container" v-show="y >= 78">

也可以使用185px，正好原有的header全部消失時(shí)候展示吸頂?shù)膆eader

頭部分類導(dǎo)航-吸頂重構(gòu)

vueuse/core : 組合式API常用復(fù)用邏輯的集合

目標(biāo)： 使用 vueuse/core 重構(gòu)吸頂功能

核心步驟

（1）安裝@vueuse/core 包，它封裝了常見的一些交互邏輯

yarn add @vueuse/core

（2）在吸頂導(dǎo)航中使用

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>