MdSidenavLayout内的粘性MdToolbar [英] Sticky MdToolbar inside MdSidenavLayout

问题描述

我有一个Angular 2 Material应用程序，该应用程序使用<md-sidenav-layout>和内部的<md-toolbar>.

I have an Angular 2 Material app that uses the <md-sidenav-layout> with an <md-toolbar> inside.

<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及其标题保持一致.但目前无法正常工作.

What I'm trying to do is have the toolbar stick to the top so it doesn't move when you scroll down. This is to make it consistent with the sidenav and its title. But currently it doesn't work.

我虽然添加position: fixed; top: 0可以解决问题，但没有实现

I though that adding position: fixed; top: 0 would do the trick but it doesn't

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

根据我从 MDN:位置中阅读的内容关于position: fixed的这篇SO帖子，如果父母使用transform似乎不起作用.而且我很确定，切换sidenav时，这就是md-sidenav-layout用于过渡的内容.我已经在一个简单的静态页面上测试了position: fixed; top: 0，它工作正常.

From what I read from MDN: position and this SO post about position: fixed, it seems it won't work if the parent uses a transform. And I'm pretty sure that's what the md-sidenav-layout uses for transition when the sidenav is toggled. I've tested the position: fixed; top: 0 on a simple static page, and it works fine.

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

I could try to take the toolbar out of the context of the md-sidenav-layout, but it's what handles the animation and transition to make the toolbar and sidenav consistent when you toggle the sidenav.

我的CSS-fu不牢固.也许我想念一些东西.任何机构都对如何解决此问题有任何想法?只要我能达到预期的效果，任何解决方法都可以接受.

My CSS-fu isn't strong. Maybe I'm missing something. Any body got any ideas on how to fix this? Any work-arounds are welcome at this point, as long as I get the desired effect.

这是 柱塞 .

推荐答案

您应将内容滚动显示在...内容上. 这不仅是一种解决方法，而且每次需要这种布局时，我实际上都会自己做，因为将滚动条放在要滚动到的内容中变得更加自然.例如，如果侧边栏内容太大，则还需要具有自己的滚动上下文.

You should put the content scroll on the... content. This is not only a workaround, I actually do it myself everytime I need this kind of layout because it fells more natural to have scrollbar inside the thing you're going to scroll in to. If the sidebar contents gets too big for example, it needs to have its own scroll context as well.

不确定材料小组为何以这种方式实现它，但是当将其与sidenav布局一起使用时，最终版本中的默认行为可能是具有固定的工具栏(或者，我希望至少有一个选择)

Not sure why the material team implemented it this way, but probably having a fixed toolbar will be the default behavior in the final version when using it with a sidenav layout (or at least we will have an option for it I hope).

无论如何，我已经更新了您的punker，以显示我的意思: http://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

Anyway, I've updated your plunker to show what I mean: http://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

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

You basically disable the scrolling on the sidenav content:

/*
 * 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:

Then you just make .app-content fill the right height and set its overflow to auto:

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

这篇关于MdSidenavLayout内的粘性MdToolbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！