vuepress-starter/docs/.vuepress/theme/components/Navbar.vue

<template>
  <nav class="navbar navbar-expand-lg fixed-top navbar-light navbar-dync">
    <div class="container">
      <RouterLink class="navbar-brand" :to="$localePath">
        <img
          v-if="$site.themeConfig.logo"
          class="logo"
          :src="$withBase($site.themeConfig.logo)"
          :alt="$siteTitle"
        >
        <span
          v-if="$siteTitle && !$site.themeConfig.logo"
          ref="siteName"
        >{{ $siteTitle }}</span>
      </RouterLink>

      <template v-if="links.length">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-md-auto">
            <li class="nav-item mx-3" v-for="item in links" :key="item.link">
              <RouterLink
                v-if="!isExternal(item.link)"
                class="nav-link"
                :to="item.link"
              >
                {{item.text}}
              </RouterLink>
              <a v-else class="nav-link" :href="item.link" target="_blank">
                {{item.text}}
                <OutboundLink />
              </a>
            </li>
          </ul>
        </div>
      </template>
    </div>
  </nav>
</template>

<script>
import { isExternal } from '@theme/utils'

export default {
  name: 'Navbar',
  computed: {
    links() {
      const navs = this.$site.themeConfig.nav || []
      return navs
    }
  },
  mounted() {
    this.$themeScroll.listen((evt) => {
      const d = window.pageYOffset
      const actCls = 'navbar-dync-act'

      if (d > 10) {
        if (!this.$el.classList.contains(actCls)) {
          this.$el.classList.add(actCls)
        }
      } else {
        if (this.$el.classList.contains(actCls)) {
          this.$el.classList.remove(actCls)
        }
      }
    })
  },
  methods: {
    isExternal
  }
}
</script>

<style lang="scss">
.navbar {
  &.navbar-dync {
    transition: all 0.5s ease;
    background: transparent;

    .navbar-nav .nav-link {
      color: #333;
    }

    &-act {
      background-color: rgba(255, 255, 255, 0.75);
    }

    @media (max-width: 991.98px) {
      #navbarSupportedContent {
        background-color: rgba(255, 255, 255, 0.75);
      }
    }

    .navbar-toggler {
      border: none;
      outline: none;
    }
  }
}

</style>