效果图

 

开发环境

vue3

关键逻辑

//导航栏状态选择
const navbarSolid = ref(false);
//初始化导航栏高度
const navbarHeight = ref(0);/*** 根据滚动距离改变样式*/
function checkNavbarOpacity() {navbarSolid.value = window.pageYOffset > navbarHeight.value / 2;
}/*** 绑定window的scroll事件*/
onMounted(() => {// 获取导航栏高度navbarHeight.value = document.querySelector('nav').offsetHeight;window.addEventListener('scroll', checkNavbarOpacity);
});
/*** 解绑window的scroll事件*/
onUnmounted(() => {window.removeEventListener('scroll', checkNavbarOpacity);
});

实现代码

<template><nav :class="{ 'afterNav': navbarSolid, 'beforeNav': !navbarSolid }"><div class="text"><span class="nav-logo" @click="router.push('/')">月木天上</span><div class="nav-list"><div class="nav-item" v-for="(nav,index) in navList" :key="index"><span @click="router.push(nav.path)">{{ nav.name }}</span></div></div></div></nav>
</template>
<script setup>
import {onMounted, onUnmounted, reactive, ref} from 'vue';
import {useDataStore} from "@/stores/dataStore"
import {useRouter} from "vue-router";const router = useRouter()
const dataStore = useDataStore()
//初始化导航列表
const navList = reactive([{name: '首页',path: '/home/index'},{name: '导航',path: '/home/nav'},{name: '课程',path: '/course/index'},{name: '博客',path: '/blog/index'},{name: '商城',path: '/shop/index'},{name: '联系我们',path: '/home/contact'},])
//导航栏状态选择
const navbarSolid = ref(false);
//初始化导航栏高度
const navbarHeight = ref(0);/*** 根据滚动距离改变样式*/
function checkNavbarOpacity() {navbarSolid.value = window.pageYOffset > navbarHeight.value / 2;
}/*** 绑定window的scroll事件*/
onMounted(() => {// 获取导航栏高度navbarHeight.value = document.querySelector('nav').offsetHeight;window.addEventListener('scroll', checkNavbarOpacity);
});
/*** 解绑window的scroll事件*/
onUnmounted(() => {window.removeEventListener('scroll', checkNavbarOpacity);
});</script>
<style scoped lang="scss">
/* 初始样式 */
.beforeNav {position: fixed;width: 100%;transition: background-color 0.3s;.text {margin-top: 30px;.nav-logo {color: #fff;float: left;margin-left: 12%;font-family: 楷体;font-weight: bolder;font-size: 2em;}.nav-logo:hover {cursor: pointer;}.nav-list {display: flex;margin-left: 49%;.nav-item {margin-left: 30px;font-family: 楷体;font-size: 1.5em;color: #a5d2e3;}.nav-item:hover {text-decoration: underline;cursor: pointer; /*变小手*/color: #ffffff;}}}
}/* 下拉后样式 */
.afterNav {background-color: #ffffff;z-index: 100;position: fixed;width: 100%;transition: background-color 0.3s;box-shadow: 0 0 9px 0 rgb(0 0 0 / 10%);.text {margin-top: 15px;margin-bottom: 15px;.nav-logo {color: #52d3aa;float: left;margin-left: 12%;font-family: 楷体;font-weight: bolder;font-size: 2em;}.nav-logo:hover {cursor: pointer;}.nav-list {display: flex;margin-left: 50%;.nav-item {margin-left: 30px;font-family: 楷体;font-size: 1.5em;color: #7f7f7f;}.nav-item:hover {text-decoration: underline;cursor: pointer; /*变小手*/color: #52d3aa;}}}
}</style>