スティッキーツールバー素材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>

今、私にはないfullscreenのために行くことも試みたが、私はレイアウトを実現するように思えるが、私はtoolbar移動しsidenavコンテンツも移動をスクロールする場合の位置は、fixedではありません仕事...コンテンツがスクロール可能でない場合、コンテナは完全な高さ（100％）のために行かないので、それを試みました。ここで

はposition: fixedとz-index: 999を使用し、上部のツールバーを保つために私のplunkr

出典

2017-06-12 Marius

あなたが解決しようとしている正確な問題は何ですか？ – Nehal

問題は、sidenavとヘッダーがスティッキーではないことです。スクロールするときにそれらを修正する必要があります。 – Marius

です。 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