另一种选择是使用bootstrap-vue包。
它具有b-navbar组件，可将其固定在顶部

<b-navbar class="header" fixed="top"></b-navbar>

示例：
x一个一个一个一个x一个一个二个x

可以通过应用以下类来设置固定导航栏。

.header {
  position:fixed; /* fixing the position takes it out of html flow - knows
                   nothing about where to locate itself except by browser
                   coordinates */
  left:0;           /* top left corner should start at leftmost spot */
  top:0;            /* top left corner should start at topmost spot */
  width:100vw;      /* take up the full browser width */
  z-index:200;  /* high z index so other content scrolls underneath */
  height:100px;     /* define height for content */
}

具有position:fixed;属性的元素在窗口滚动时不会改变，因此位置固定的元素将保持在右侧。

new Vue({
  el: "#app",
  data:{
      active: false
  },
  methods: {
    toggleNavClass(){
        if(this.active == false){
          return 'nav'
        } else {
          return 'sticky-nav'
        }

    }
  },
  mounted(){
  window.document.onscroll = () => {
      let navBar = document.getElementById('nav');
      if(window.scrollY > navBar.offsetTop){
        this.active = true;
        } else {
        this.active = false;
      }
    }
  }
})

/*scrollY returns the scroll amount in pixels.
offsetTop is the px difference between the navBar and closest parent element*/

body {
  margin: 0;
  box-sizing: border-box;
}

#app {
  color: #2c3e50;
  background-color: #ccd6dd;
  height: 120vh;
}

a {
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin: 0 1vw;
}

a:hover {
  transition: linear 100ms;
  color: red;
}

/* two classes, decided on scroll */
.nav {
  transition: 100ms;
  padding: 25px;
}

.sticky-nav{
  transition: 100ms;
  padding: 20px;
}

#nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #55acee;
  position: fixed;
  top: 0;
}

/* have to add the ID nav (#nav) otherwise the backgrnd color won't change as the previous background color is set in an ID and ID trumps class notation */
#nav.sticky{
  transition: 150ms;
  box-shadow: 0px 15px 10px -15px #111;
  background-color:  #ccd6dd;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div id="nav" :class="{sticky:active}"> 
      <div id="nav-container" :class="toggleNavClass()"><a href="#">Menu</a>
    </div>
      <router-view />
</div>

我刚用Vue建了个网站这是我的代码