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

Question

在此处输入图片说明

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

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

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

Answer 1

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

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

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

例子：

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

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

Answer 2

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

.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;滚动窗口时具有属性的元素不会改变，因此固定定位的元素将保持正确。