我有一个使用< md-sidenav-layout>的Angular 2 Material应用程序.使用< 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及其标题保持一致.但目前它不起作用.
我虽然增加了位置：固定; top：0可以做到这一点,但事实并非如此
/* Doesn't work */
.toolbar {
position: fixed;
top: 0;
}
从我从MDN: position和this SO post读到的关于position：fixed的内容,如果父级使用转换,它似乎不起作用.而且我非常确定md-sidenav-layout在sidenav切换时用于转换的内容.我测试了这个位置：固定; top：0在一个简单的静态页面上,它工作正常.
我可以尝试将工具栏从md-sidenav-layout的上下文中取出,但是当你切换sidenav时,它会处理动画和过渡以使工具栏和sidenav保持一致.
我的css-fu并不强大.也许我错过了什么.有没有关于如何解决这个问题的任何机构？只要我获得了预期的效果,欢迎任何解决方法.
这是Plunker.
解决方法
您应该将内容滚动到…内容上.
这不仅仅是一种解决方法,我实际上每次都需要这种布局时自己做,因为滚动条在你要滚动到的东西里面更自然.如果侧边栏内容太大,例如,它也需要有自己的滚动上下文.
这不仅仅是一种解决方法,我实际上每次都需要这种布局时自己做,因为滚动条在你要滚动到的东西里面更自然.如果侧边栏内容太大,例如,它也需要有自己的滚动上下文.
不知道为什么材料团队以这种方式实现它,但是当使用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;
}
