吸頂導航實現

【實現目標】：

在Layout頁面中，瀏覽器上下滾動時，距離頂部距離大于80px吸頂導航顯示，小于則隱藏。

【實現過程】：

• 通過layout接口獲取分類列表內容并使用categorystore進行狀態管理，獲取到內容進行頁面渲染。

• 在外層包裹stick，內層放置RouterLink渲染導航跳轉，使用v-on的類名增強控制 stick的show屬性

• 安裝VueUse，參考官方手冊：VueUse，導入useScroll函數，此處只用獲取窗口的y坐標，來控制show屬性是否生效

• 更改stick的樣式，狀態一：向上平移+完全透明；狀態二：show屬性生效時，移除平移+完全不透明

• 此處增加了一個插值表達式 {{y}}來監視目前y坐標值

<script setup>
// 獲取滾動距離
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)import { useCategoryStore } from '@/stores/categoryStore'
const categoryStore = useCategoryStore()
</script><template><div class="app-header-sticky" :class="{ show: y > 80 }"><div class="container"><RouterLink class="logo" to="/" />{{ y }}<!-- 導航區域 --><ul class="app-header-nav"><li class="home"><RouterLink to="/">首頁</RouterLink></li><li class="home" v-for="item in categoryStore.categoryList" :key="item.id"><RouterLink active-class="active" :to="`/category/${item.id}`">{{item.name}}</RouterLink></li></ul></div></div>
</template><style scoped lang="scss">
.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%);opacity: 0;// 狀態二：移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.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;}
}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: pink;border-bottom: 1px solid pink;}}.active {color: pink;border-bottom: 1px solid $Color;}}
}
</style>