と<md-toolbar>
を内部に持つAngular 2 Materialアプリがあります。MdSidenavLayout内のスティッキーMdToolbar
<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があります。
ありがとうございました。それは素晴らしい作品です。そして、あなたが正しいと思うのですが、特にサイドバーを使ってコンテンツをスクロールさせるのは意味があります。サイドバーは、私がまだ考えていない道です。トピックから少し離れていますが、Angular 2のためにお勧めするスリムなスクロールライブラリがありますか? –
@peeskillet私は最近、プライベートプロジェクトでそのためのディレクティブを1つ作成しました。おそらくコードを見て必要なものを修正できるのであれば、あなたのニーズに十分対応できるかもしれません。私がそれを公開すると、私はあなたにpingを返します... – cvsguimaraes
@snolflake。すばらしい答え!私はいつか試して投資しましたが、できませんでした。 – micronyks