在 md-sidenav-layout 中时，md-toolbar 可以固定在顶部吗? [英] Can md-toolbar be fixed top when inside md-sidenav-layout?

问题描述

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

|--------------------------------||<------ md-工具栏------->|<- 修复此问题，以便内容滚动到下方|--------------------------------||^||可滚动 ||v|----------------------------------

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

风格:固定

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

感谢任何帮助.

解决方案

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

转换:translate3d(0,0,0)

这样做是重置子元素的坐标系.这是使用transform3d 的一个已知问题"或考虑因素.我们想出的替代方案是将 md-toolbar 放置在 md-sidenav-layout 之外，如下所示:

<md-toolbar>...</md-toolbar>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

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

有关 fixed/translate3d 问题的更多信息，请参阅此 SO:'transform3d' not工作位置:固定儿童

Am really struggling here. We're using md-sidenav-layout and finding it impossible to come up with a way to fix the md-toolbar to the top of the page:

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

Because of the way md-sidenav-layout seems to fix itself, adding

style: fixed

to the md-toolbar doesn't fix it - in fact nothing seems to!

Any help appreciated.

解决方案

For anyone else struggling with this, the reason why it's difficult is because both md-sidenav-layout and md-sidenav-content both specify

transform: translate3d(0,0,0)

What this does is reset the coordinate system for child elements. This is a known 'issue' or consideration with using transform3d. The alternative we came up with was to site the md-toolbar outside the md-sidenav-layout like this:

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

Doing the above gets the required effect of a fixed md-toolbar with a full screen layout.

See this SO for more info on the fixed/translate3d issue: 'transform3d' not working with position: fixed children

这篇关于在 md-sidenav-layout 中时，md-toolbar 可以固定在顶部吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！