我真的在这里挣扎.我们正在使用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