javascript - 如何用vue js制作固定导航栏？

Question

我尝试使用 vue.js 构建一个登陆页面，标题设计如上图所示。

因此，我创建了一个名为“header”的组件，其中包含根据设计的内容。

如何制作一个固定的导航栏，当页面滚动时导航栏仍然在顶部？

Answer 1

另一种选择是使用 bootstrap-vue包。

它有 b-navbar可以固定到的组件 top

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

例子:

const vm = new Vue({el: '#app'})

<link href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet"/><link href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><script src="http://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><div id="app">

  <!-- ************************************ -->
  <!-- Place the fixed prop within b-navbar -->
  <!-- ************************************ -->
  
  <b-navbar class="header" type="dark" variant="info" fixed="top">
    <b-navbar-brand href="#"> My fixed header </b-navbar-brand>
  </b-navbar>
  
  <!-- *********************************** -->
  <div style="margin-top: 60px;"><ol><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li></ol></div></div>