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

本文详细讲解如何在Vue3应用中，通过JavaScript和CSS3实现页面滚动时，第一行导航栏在上划过程中自动切换为第二行导航栏并固定在顶部。这个效果常见于许多现代网页设计中，提升用户体验。

<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>