MdSidenavLayout 内的粘性 MdToolbar

Posted 2023-03-06

【中文标题】MdSidenavLayout 内的粘性 MdToolbar

【英文标题】：Sticky MdToolbar inside MdSidenavLayout

【发布时间】：2017-02-02 15:48:23

【问题描述】：

我有一个 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 和this SO post 中读到的关于position: fixed 的内容，如果父母使用transform，它似乎不起作用。而且我很确定这就是切换 sidenav 时md-sidenav-layout 用于转换的内容。我在一个简单的静态页面上测试了position: fixed; top: 0，它运行良好。

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

我的 CSS-fu 不强。也许我错过了一些东西。有没有人对如何解决这个问题有任何想法？在这一点上，任何变通方法都是受欢迎的，只要我得到想要的效果。

这里是Plunker。

【参考方案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 填充正确的高度并将其溢出设置为自动：

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

【讨论】：

谢谢。它工作得很好。你是对的，让内容滚动确实更有意义，尤其是使用侧边栏，这是一条我还没有到达的道路，我必须考虑它。有点跑题了，但是你知道你会为 Angular 2 推荐什么好的超薄滚动库吗？

@peeskillet 我最近在一个私人项目中为它制定了一个指令，也许它可以很好地满足您的需求，如果不是，您总是可以看到代码并修复您需要的东西。一旦我发布它，我会回复你......

@snolflake。极好的答案！我尝试并投入了一些时间来做到这一点，但我做不到。

@micronyks 感谢您的尝试。

非常感谢。这真的很有帮助。节省了我的一天 +100