vue3：上划第一行导航栏不固定，第二行导航栏变成第一行固定住

关注

原创最新推荐文章于 2026-05-06 16:49:53 发布 582 阅读 AI 写同款· GEO 优化 ›

【vue3】固定上导航栏和左侧导航栏，只显示其他内容在主内容区域在elment-plus官网上找到自己需要的布局容器模型Container 布局容器 | Element Plus (element-plus.org)我的侧边栏是菜单，在菜单里面加上router属性，它的子菜单你点击它才能跳转到相应的路由去展示内容；注意一定要主内容区域的标签里加上黄色区域的代码，这样你的其他页面才能在主内容区域显示；阅读详情

<template>
  <div class="home">
    <div class="header">
      <div class="logo">logo</div>
      <div class="nav-list">
        <ul>
          <li>首页</li>
          <li>首页</li>
          <li>首页</li>
          <li>首页</li>
        </ul>
      </div>
    </div>
    <div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''">第二行导航栏</div>
    <div class="banner"></div>
  </div>
  <div class="container"></div>
</template>

<script>
import { onMounted,ref } from "vue";
import {useTestStore} from '@/store/index';
import axios from "axios";
export default {
  name: "HomeView",
  //上划第一行导航栏不固定，第二行导航栏变成第一行固定住
  setup() {
    const navBarFixed = ref(false);
    const Test=useTestStore();
    const d=ref();
    const watchScroll = () => {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop);
      if (scrollTop > 100) {
        navBarFixed.value = true;
      } else {
        navBarFixed.value = false;
      }
      // console.log(navBarFixed.value)
    };
    onMounted(() => {
      window.addEventListener("scroll", watchScroll);
      Test.setCurrent();
        
    });
    return{
      navBarFixed,
      Test,
    }
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
}
.header {
  width: 100%;
  height: 50px;
  background-color: #40a9ff;
  display: flex;
  justify-content: space-around;
  .nav-list ul {
    float: left;
    list-style: none;
    li {
      float: left;
      width: 129px;
      text-align: center;
    }
  }
}
.nav {
  width: 100%;
  height: 50px;
  background-color: #69c0ff;
}
.banner {
  width: 100%;
  height: 300px;
  background-color: #91d5ff;
}
.container {
  width: 100%;
  height: 3000px;
  background-color: #bae7ff;
}
.navBarWrap {
    position:fixed;
    top:0;
    z-index:999;
  }
</style>

收录于