顶部动态菜单栏的使用

效果图

开发环境

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>
相关推荐
CUGGZ16 小时前
前端部署,又有新花样?
前端·javascript
Zz_waiting.16 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者16 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者16 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042717 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu17 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_4233919317 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_4233919317 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ17 小时前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事17 小时前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端