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

Question

在此处输入图像描述

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

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

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

原文由 Yudi Krisnandi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

它有 b-navbar 组件，可以固定在 顶部

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

原文由 rotsendroid 发布，翻译遵循 CC BY-SA 4.0 许可协议