MdSidenavLayout中的粘性MdToolbar

我有一個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。

來源

2016-09-25 Paul Samsotha

您應該將內容滾動到...內容上。這不僅是一種解決方法，每次我需要這種佈局時我都會自己做，因爲在您要滾動的內容中使用滾動條會更自然。如果側邊欄內容太大，例如它也需要自己的滾動上下文。

不知道爲什麼材料團隊這樣實現它，但可能有一個固定的工具欄將在最終版本中使用sidenav佈局時的默認行爲（或者至少我們會有一個選項，我希望）。

無論如何，我已經更新了你的plunker來說明我的意思： http://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

你基本上禁用的sidenav內容滾動：

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

然後你只要把.app-content填寫正確的高度並將其溢出設置爲自動：

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

來源

2016-09-25 06:42:07 cvsguimaraes

謝謝。它效果很好。你說得對，讓內容滾動更有意義，特別是側欄，這是我還沒有達到的道路，還沒有去考慮。一個小題目，但是你知道你會爲Angular 2推薦任何好的細長卷軸庫嗎？ –

@peeskillet我最近在一個私人項目中爲它做了一個指令，可能它對你的需求足夠好，如果不是，你總是可以看到代碼並修復你需要的東西。一旦我發佈了它，我會將你平復... – cvsguimaraes

@snolflake。精湛的答案！我嘗試了一段時間來做這件事，但我做不到。 – micronyks

MdSidenavLayout中的粘性MdToolbar

回答

相關問題