粘性工具栏素材2和sidenav

最近开始学习素材2并跑了出来。我的做法就像在Youtube网站上，左侧有一个汉堡包菜单，用于展开/折叠侧边菜单。试图做到像这样的方法：粘性工具栏素材2和sidenav

<md-toolbar class="fixed-header"> 
    <button class="app-icon-button" (click)="start.toggle()"> 
      <i class="material-icons app-toolbar-menu">menu</i> 
    </button> 
</md-toolbar> 

<md-sidenav-container> 
    <md-sidenav #start class="app-sidebar" mode="side">test</md-sidenav> 

    <div class="text"> 
     {{ text }} 
    </div> 
</md-sidenav-container>

现在好像我实现了布局，但定位不fixed，如果我滚动toolbar移动和sidenav内容也移动，我想还去fullscreen不工作...试过，因为如果内容不可滚动，容器不会达到全高（100％）。

这是我plunkr

来源

2017-06-12 Marius

什么是你正在试图解决的确切问题？ – Nehal

问题是，sidenav和标题不粘，我希望当滚动他们应该被修复... – Marius

为了保持对顶部的工具栏，使用position: fixed和z-index: 999。为了保持sidenav外滚动区域的，它需要的md-sidenav-container

感谢之外采取创建的plnkr演示，它帮助了很多快速找到一个解决方案。这是修改的demo。

app.component.html:

<md-toolbar class="fixed-header"> 
     <button class="app-icon-button" (click)="start.toggle()"> 
     <i class="material-icons app-toolbar-menu">menu</i> 
     </button> 
</md-toolbar> 

<md-sidenav-container > 
    <div class="text" style="min-height: 99vh"> 
     {{ text }} 
    </div> 
</md-sidenav-container> 

<md-sidenav #start class="app-sidebar side-nav-style" mode="side" > 
     test 
</md-sidenav>

app.component.css:

.fixed-header { 
    top: 0; 
    position: fixed; 
    z-index:999; 

} 

.text { 
    width: 5px; 
} 

.side-nav-style{ 
    background-color: grey; 
    width: 6em; 
    margin-top:62px; 
    position: fixed 
}

让我知道这是你在找什么。

来源

2017-06-12 12:46:48 Nehal

好吧关于标题，但侧杆怎么样？我希望它不会隐藏容器的内容，但容器也会移动到右侧，并且侧边导航将被固定，当您向下滚动内容时不会滚动。 – Marius

我已经更新了Plnkr演示。 – Nehal