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)

这样做是为了重置子元素的坐标系。这是使用transform3d的已知“问题”或考虑因素。我们提出的替代方案是在md-sidenav-layout之外放置md工具栏，如下所示：

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

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

有关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固定在顶部吗？

2 个答案: