Vue3项目使用Bulma的is-fixed-top类无法固定导航栏问题

你遇到的问题由两个核心错误导致，按以下步骤修复即可：

1. 修复Bulma版本不匹配问题 #

你声明使用Bulma 0.9.3版本，但index.html中实际引入的是0.5.3旧版本，旧版本的is-fixed-top类样式存在兼容问题，直接替换CDN链接即可：

<!-- 替换index.html中旧的Bulma引入行 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">

2. 移除导航栏外层多余的section包裹 #

App.vue中将NavBar组件放在了<section>标签内，position: fixed定位的元素如果父容器存在transform、overflow: hidden、filter等CSS属性，会导致固定定位失效，直接调整App.vue模板结构：

<template>
  <div id="app">
    <NavBar></NavBar>
    <main class="container content">
      <router-view />
    </main>
  </div>
</template>

<script>
import NavBar from "./components/NavBar";

export default {
  components: {
    NavBar,
  },
};
</script>

<style>
</style>

3. 可选校验项 #

如果完成上述两步后仍存在问题，按以下规则校验：

• 检查全局自定义样式/组件样式中是否存在覆盖.navbar的position属性的规则，确保is-fixed-top自带的position: fixed生效
• 确保没有其他样式覆盖了has-navbar-fixed-top类给body设置的默认padding-top值，避免内容和导航栏重叠

内容的提问来源于stack exchange，提问作者v-kessler