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

原创

于 2022-05-10 14:50:29 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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