我有一個Angular 2 Material應用程序,它內部使用<md-sidenav-layout>
和<md-toolbar>
。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及其標題一致。但目前它不起作用。
不過,我覺得,加入position: fixed; top: 0
會做的伎倆,但它不
/* Doesn't work */
.toolbar {
position: fixed;
top: 0;
}
從我從MDN: position和this SO post瞭解position: fixed
,似乎也不會,如果工作父母使用transform
。我很肯定這是md-sidenav-layout
在切換sidenav時用於轉換的。我在一個簡單的靜態頁面上測試了position: fixed; top: 0
,並且它工作正常。
我可以嘗試從md-sidenav-layout
的上下文中取出工具欄,但它是處理動畫和轉換以使切換sidenav時工具欄和sidenav保持一致的工具。
我的CSS-FU不強。也許我錯過了一些東西。任何機構有任何想法如何解決這個問題?任何變通辦法在這一點上都是受歡迎的,只要我獲得理想的效果。
這裏是Plunker。
謝謝。它效果很好。你說得對,讓內容滾動更有意義,特別是側欄,這是我還沒有達到的道路,還沒有去考慮。一個小題目,但是你知道你會爲Angular 2推薦任何好的細長卷軸庫嗎? –
@peeskillet我最近在一個私人項目中爲它做了一個指令,可能它對你的需求足夠好,如果不是,你總是可以看到代碼並修復你需要的東西。一旦我發佈了它,我會將你平復... – cvsguimaraes
@snolflake。精湛的答案!我嘗試了一段時間來做這件事,但我做不到。 – micronyks