粘性工具欄素材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