MdSidenavLayout内のスティッキーMdToolbar

Question

と<md-toolbar>を内部に持つAngular 2 Materialアプリがあります。

<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とそのタイトルと一致するようにするためです。しかし、現在は動作しません。

Iそれがposition: fixed; top: 0を追加するトリックを行うだろうけれども、ない

/* Doesn't work */ 
.toolbar { 
    position: fixed; 
    top: 0; 
} 

私はposition: fixedについてMDN: positionとthis SO postから読んだものから、それがあれば、それは動作しませんようですん親はtransformを使用します。そして、私は確かにsidenavがトグルされたときにmd-sidenav-layoutがトランジションに使用するものだと確信しています。私は、単純な静的ページでposition: fixed; top: 0をテストしたところ、うまく動作します。

私はmd-sidenav-layoutのコンテキストからツールバーを取り出そうとする可能性がありますが、それはアニメーションとトランジションを処理して、sidenavを切り替えるときにツールバーとsidenavを一貫させるものです。

私のCSS-FUは強力ではありません。たぶん私は何かが欠けているでしょう。どんな体にもこれを修正する方法がありますか？私が望む効果が得られる限り、どんな回避策もこの時点で歓迎されます。

ここにはPlunkerがあります。

Answer 1

...コンテンツにスクロールする必要があります。 これは回避策ではなく、実際にスクロールバーをスクロールさせるのが自然であるため、この種のレイアウトが必要なときはいつも自分でやります。たとえば、サイドバーの内容が大きくなりすぎると、独自のスクロールコンテキストも必要になります。

マテリアルチームがこのように実装した理由はわかりませんが、おそらく固定ツールバーを持つことは、サイドバーレイアウトで使用するときの最終バージョンのデフォルトの動作になります（または、 ）。右の高さを埋めるあなただけ.app-contentを作る次に

/* 
* 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; 
} 

： http://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

あなたは基本的にsidenavコンテンツのスクロールを無効にします。

とにかく、私は私が何を意味するかを示すために、あなたのplunkerを更新しましたオーバーフローをautoに設定します。

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