MdSidenavLayout 内的粘性 MdToolbar

Question

我有一个 Angular 2 Material 应用程序，它使用 <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: position and this SO post 那里读到的关于 position: fixed 的信息，如果 parent 使用 transform 似乎它不会起作用。我很确定这就是 md-sidenav-layout 在切换 sidenav 时用于转换的内容。我已经在一个简单的静态页面上测试了 position: fixed; top: 0，它工作正常。

我可以尝试将工具栏从 md-sidenav-layout 的上下文中移除，但它是处理动画和过渡以使工具栏和 sidenav 在您切换 sidenav 时保持一致的原因。

我的CSS-fu不强。也许我错过了什么。 body 有任何关于如何解决这个问题的想法吗？任何work-arounds都欢迎，只要达到我想要的效果即可。

这里是 Plunker.

Answer 1

您应该将内容滚动条放在...内容上。这不仅是一种解决方法，实际上每次我需要这种布局时我都会自己做，因为在您要滚动到的内容中包含滚动条会更自然。例如，如果边栏内容变得太大，它也需要有自己的滚动上下文。

不确定为什么 material 团队以这种方式实现它，但在将其与 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填充正确的高度并将其溢出设置为自动：

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

MdSidenavLayout 内的粘性 MdToolbar

Sticky MdToolbar inside MdSidenavLayout

css

angular2-material

angular