angular – 当md-sidenav-layout内部时,md-toolbar可以固定在顶

发布时间：2020-12-17 07:25:39 所属栏目：安全来源：网络整理

导读：我真的在这里挣扎.我们正在使用md-sidenav-layout并且发现无法想出一种方法将md-toolbar修复到页面顶部： |--------------------------------|| ------ md-toolbar ------- | - fix this so content scrolls under|--------------------------------|| ^|| s

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

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

因为md-sidenav-layout似乎可以解决自己的问题,所以添加

style: fixed

到md工具栏不修复它 – 事实上似乎没有！

任何帮助赞赏.

对于其他任何挣扎于此的人来说,之所以难以理解是因为md-sidenav-layout和md-sidenav-content都指定了

transform: translate3d(0,0)

这样做是为了重置子元素的坐标系.这是使用transform3d的已知“问题”或考虑因素.我们提出的替代方案是将md-sidenav-layout外的md-toolbar放置在这样的：

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!