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

Posted 2023-02-22

【中文标题】在 md-sidenav-layout 中时，md-toolbar 可以固定在顶部吗？

【英文标题】：Can md-toolbar be fixed top when inside md-sidenav-layout?

【发布时间】：2017-03-16 03:38:12

【问题描述】：

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

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

由于 md-sidenav-layout 似乎可以自行修复，添加

style: fixed

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

任何帮助表示赞赏。

【问题讨论】：

看看this post

【参考方案1】：

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

transform: translate3d(0,0,0)

这样做是重置子元素的坐标系。这是使用 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 所需的效果。

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

【讨论】：

我发誓角材料是我曾经使用过的最糟糕的“框架”。当您必须添加自定义样式定义以具有 basic 功能时，为什么还要使用这样的怪物，这真的超出了我的范围。不妨一开始就编写自己的 CSS。至少它会做你想做的事，除了你自己的创造力，你不需要咨询任何人。

虽然你的评论已经有一年了，但我发现它直到今天仍然有效。我只是尝试设置一个简单的网站骨架，由工具栏、sidenav 和主要内容区域组成，每个都可以自己滚动。我现在已经为此工作了 4 个小时，仅仅是因为我必须单独调整每个元素，而 AngularMaterial 会以某种奇怪的方式弄乱我添加的每个 UI 元素。回来3次后，对自己说“这次你会得到它”，我完成了。螺丝角（材料），认真。我尝试过几次非常努力地学习这个“直观的 API”，但现在我已经完成了。

让我们知道您迁移到了哪些其他框架以及您对自己的选择是否满意。

【参考方案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;