上部に固定検索バーを持つsidenavを作成する（AngularMaterial2）

Question

過去数回は、sidenavの高さを超える量のナビゲーションオプションを備えたsidenavを持っていました。

UXの部分を手助けするために、sidenavの上部にテキストボックスを含めたいと思います。これは上部に固定され、ナビゲーションバーがスクロールダウンしても移動しません。

私はsidenavの内部にテキストボックスを置くことに成功しましたが、上部に固定しませんでした。

私はCSSを使用して、position: fixedまたはposition: absoluteのいずれかを使用して試してみましたが、忘れてしまったことがたくさんありましたが、何も働いていませんでした。私はそれを私が望む場所に位置づけて管理しましたが、背景は消えてしまっていました。そして、ナビゲーションリンクがテキストボックスの後ろに表示されるので、実際のサイドレコード内では起こっていません。

私は他のサイトでも同様のアプローチを見ていないので、例を取る場所はありませんでした。
基本はhttps://material.angular.io/に示されていますが、上にテキストボックスがあることを除けば、navbarのリンクをフィルタリングするのに役立ちます。

Answer 1

私はあなたが本当にしたいことを確信することはできません...しかし、これは私が最近横断した技術を試してみるのに最適な場所だと思います。 transform: translate(x,x)を使用して、fixedポジショニングの新しいコンテキストを作成することができます。通常fixedはボディをバウンダリなので尊重しますが、要素のtranslateを使用すると、固定ポジショニング用の独自の子スコープが作成されているようです。

.parent { 
    transform: translate(0,0); 
} 

.parent .form { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.parent .sidebar-module-list { 
    padding-top: {{formHeight}}; 
} 

Here is an example CodePen