在 md-sidenav-layout 中时，md-toolbar 可以固定在顶部吗？

Question

我真的很挣扎。我们正在使用 md-sidenav-layout 并发现无法想出一种将 md-toolbar 固定到页面顶部的方法：

|--------------------------------|
|   <------ md-toolbar ------->  |       <- fix this so content scrolls under
|--------------------------------|
|                               ^|
|           scrollable           |
|                               v|
----------------------------------

由于 md-sidenav-layout 似乎自行修复的方式，添加

style: fixed

md-toolbar 没有修复它 - 实际上似乎什么都没有！

感谢任何帮助。

Answer 1

对于其他为此苦苦挣扎的人来说，之所以困难是因为 md-sidenav-layout 和 md-sidenav-content 都指定了

transform: translate3d(0,0,0)

这样做是为子元素重置坐标系。这是已知的 'issue' 或考虑使用 transform3d。我们想出的替代方案是将 md-toolbar 放置在 md-sidenav-layout 之外，如下所示：

<div style="position: fixed; width: 100%">
  <md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

执行上述操作可获得具有全屏布局的固定 md-toolbar 所需的效果。

有关 fixed/translate3d 问题的更多信息，请参阅此 SO：'transform3d' not working with position: fixed children

Answer 2

使用这个：

<md-toolbar color="primary" layout="row" style="position: fixed;">
</md-toolbar>
<md-sidenav-container fullscreen>
</md-sidenav>

css:

.mat-toolbar.mat-primary{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}

在 md-sidenav-layout 中时，md-toolbar 可以固定在顶部吗？

Can md-toolbar be fixed top when inside md-sidenav-layout?

angular

angular-material2