如何在 vue 材质中使用 md-toolbar 创建固定导航栏？答案

【问题标题】：How do I create a fixed navigation bar using md-toolabr in vue material?如何在 vue 材质中使用 md-toolbar 创建固定导航栏？
【发布时间】：2017-12-08 15:14:25
【问题描述】：

我想使用 vue 材质框架创建一个固定到导航栏。我怎么做？

<md-whiteframe md-elevation = "3" class = "main-toolbar">



    <md-toolbar class = "flex: 1">



    </md-toolbar>


  </md-whiteframe>

我从这个大纲开始，但无论我做什么，我似乎都无法修复它。

【问题讨论】：

标签： vue.js material-design vue-material

【解决方案1】：

您需要从 css 添加粘性定位。有关示例，请参阅此代码笔：https://codepen.io/aprouja1/pen/awKavJ

#toolbar{
    position:sticky;
    top:1px;
}

【讨论】：

我想要的是，当我滚动页面时，导航栏不会随页面滚动，它仍然固定在顶部。这个位置：sticky 不会那样做。
我正在使用 safari。
试试这个。在 safari 的 webkit 样式中添加：codepen.io/anon/pen/awjbwz

【解决方案2】：

您可以使用默认的 CSS，例如：

.main-toolbar {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
  }

【讨论】：