MdSidenavLayout中粘滞的MdToolbar

Question

我有一个使用的角度2材质的应用程序<md-sidenav-layout>与<md-toolbar>内部.

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    sidenav content
  </md-sidenav>

  <md-toolbar color="primary" class="toolbar">
    toolbar content
  </md-toolbar>
</md-sidenav-layout>

它看起来像这样

我要做的是让工具栏粘在顶部,这样当你向下滚动时它就不会移动.这是为了使其与sidenav及其标题保持一致.但目前它不起作用.

我虽然添加position: fixed; top: 0会做到这一点,但事实并非如此

/* Doesn't work */
.toolbar {
  position: fixed;
  top: 0;
}

从我读出MDN:位置和该SO张贴有关position: fixed,似乎如果父母使用它不会工作transform.而且我很确定md-sidenav-layout侧面切换时转换的用途是什么.我position: fixed; top: 0在一个简单的静态页面上测试了它,它工作正常.

我可以尝试将工具栏从上下文中取出md-sidenav-layout,但它是处理动画和过渡以使工具栏和sidenav在切换sidenav时保持一致的.

我的CSS-fu并不强大.也许我错过了什么.有没有关于如何解决这个问题的任何机构？只要我获得了预期的效果,欢迎任何解决方法.

这是Plunker.

Answer 1

您应该将内容滚动到...内容上.这不仅仅是一种解决方法,我实际上每次都需要这种布局时自己做,因为滚动条在你要滚动到的东西里面更自然.如果侧边栏内容太大,例如,它也需要有自己的滚动上下文.

不知道为什么材料团队以这种方式实现它,但是当使用sidenav布局时,可能有一个固定的工具栏将是最终版本中的默认行为(或者至少我希望它有一个选项).

无论如何,我已经更新了你的plunker以显示我的意思:http://plnkr.co/edit/YViydOX9msbd8GJCGcm7？p = preview

你基本上禁用了sidenav内容的滚动:

/*
 * The /deep/ selector is simply to overcome view encapsulation
 * and be able to select the div.md-sidenav-content generated at runtime
*/
md-sidenav-layout /deep/ .md-sidenav-content {
  overflow: hidden;
}

然后你只需.app-content填充正确的高度并将其溢出设置为auto:

.app-content {
  padding: 20px;
  height: calc(100% - 64px);
  overflow: auto;
}