Question

我正在尝试做与此问题Can md-toolbar be fixed top when inside md-sidenav-layout?

中提到的内容类似的内容

我想要一个固定的工具栏，然后滚动区域。我尝试了该问题中提供的解决方案但是没有用。我也搜索了git hub上的所有选项（https://github.com/angular/material2/issues/735）似乎没有什么对我有用。

我正在使用Angular 2和Angular材料2（https://material.angular.io/）我的应用程序组件代码如下

<md-sidenav-container [class.m2app-dark]="isDarkTheme">
  <md-sidenav #sidenav mode="side" class="app-sidenav">SideNave</md-sidenav>

  <md-toolbar color="primary" class="md-medium-tall">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>
    Sample
    <span class="app-toolbar-filler"></span>
    <button md-button routerLink="/home">HOME</button>
    <button md-button routerLink="/contacts">CONTACTS</button>
    <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
  </md-toolbar>

  <router-outlet></router-outlet>
</md-sidenav-container>


<span class="app-action" [class.m2app-dark]="isDarkTheme">
<button md-fab><md-icon>add</md-icon></button>
</span>

我有什么方法可以使用带侧面导航的可滚动内容区域固定工具栏

|--------------------------------|
|   <------ md-toolbar ------->  |       <- fix this so content scrolls under
|--------------------------------|
|                               ^|
|           scrollable           |
|                               v|
----------------------------------

Answer 1

我也试图解决同样的问题，但另外我需要在可滚动区域内使用md-sidenav。请注意，我发现可能是一种解决方法，直到它们取代md-content。

在下面的链接阅读文档时我注意到的是，它们实际上是显示嵌套在演示窗口中的可滚动内容。主要区别在于它们通过将宽度更改为宽度将屏幕（md-sidenav）分割成一定宽度（约50％）：100％填充整个内容区域。然后我决定只使用md-sidenav作为我的实际内容区域来替代md-content。

https://material.angular.io/components/sidenav/examples

解决方法：

您可以尝试使用以下代码将md-sidenav-containers嵌套在彼此之间，因为md-sidenav-containers遵循材质2布局，创建一个FULL宽度md-sidenav，它不会以100％宽度工作并且md- sidenav已经包含适当的溢出-y。第二部分要求您调整md-sidenav-container的高度以匹配上面的工具栏。请参阅下面的代码示例在您的情况下，您可以删除#leftmenu和#sidenav以匹配上面给出的布局。

.example-container {
 width: 100%;
 height: calc(100vh - 64px);
 border: 1px solid rgba(0, 0, 0, 0.5);
 }

<md-sidenav-container fullscreen>
    <md-toolbar color="primary">
    top toolbar
    </md-toolbar>
   <md-sidenav #leftmenu mode="side" opened="true" >
    left menu
   </md-sidenav>

   <md-sidenav-container class="example-container">
      <md-sidenav #content style="width:100%" mode="side" opened>
           Your scrollable content goes here
           <button type="button" md-button (click)="sidenav.open()">Open sidenav</button>
      </md-sidenav>

      <md-sidenav #sidenav align="end">
          My side menu, hidden
      </md-sidenav>
   </md-sidenav-container>
</md-sidenav-container>

Answer 2

几周前，我一直在努力解决同样的问题。

您使用的是webpack，systemJS还是其他什么？由于systemJS生成的特定DOM（尤其是<），我使用的解决方法似乎对systemJS来说是不合适的（请参阅此处angular 2 material container fixed not working）。

如果您对某些特定生成的DOM没有反对，最简单的解决方法是为iframe标记设置css属性height: 100%，并为其每个父级设置最多md-sidenav-container（在我的情况下，它是html，html，body，然后是main。）

在md-sidenav-container

中使用时，此技巧还可修复position: fixed损坏的行为

编辑考虑到最近建议将md-sidenav-container替换为<md-sidenav-container>，我不得不说这是一个糟糕的解决方案，因为此标记已被弃用并将消失（如果是还没有完成）在下一个材料发布中，这意味着如果你想在某个时候升级到最终版本，那么关于固定项目/ sidenav的所有工作都将消失，你将不得不重构它 - 并且面对同样的问题现在的问题。

Answer 3

我可以通过将md-sidebar-container更改为md-sidenav-layout来解决我的问题

<md-toolbar color="primary" class="md-medium-tall" style="position:fixed; z-index: 10">
  <button class="app-icon-button" (click)="sidenav.toggle()">
    <i class="material-icons app-toolbar-menu">menu</i>
  </button>
  Sample
  <span class="app-toolbar-filler"></span>
  <button md-button routerLink="/home">HOME</button>
  <button md-button routerLink="/contacts">CONTACTS</button>
  <button md-button (click)="isDarkTheme = !isDarkTheme">TOGGLE THEME</button>
</md-toolbar>

<md-sidenav-layout [class.m2app-dark]="isDarkTheme">
  <md-sidenav #sidenav mode="side" class="app-sidenav" style="margin-top: 70px">SideNave</md-sidenav>
  <div style="margin-top: 70px">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-layout>

<span class="app-action" [class.m2app-dark]="isDarkTheme">
<button md-fab><md-icon>add</md-icon></button>
</span>

无法将md-toolbar固定在顶部

3 个答案: