Sticky MdToolbar внутри MdSidenavLayout

Question

У меня есть приложение Angular 2 Material, которое использует <md-sidenav-layout> с <md-toolbar> внутри.

<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> 

И это выглядит так

То, что я пытаюсь сделать, это панель инструментов клюшку к вершине, чтобы он не двигается, когда вы прокрутите вниз. Это должно привести его в соответствие с сиденавом и его названием. Но в настоящее время это не работает.

я хоть что добавление position: fixed; top: 0 будет делать трюк, но он не

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

Из того, что я читал из MDN: positionthis SO post и о position: fixed, кажется, что это не будет работать, если родитель использует transform. И я уверен, что это то, что использует md-sidenav-layout для перехода при переключении sidenav. Я тестировал position: fixed; top: 0 на простой статической странице, и он отлично работает.

Я мог бы попытаться вывести панель инструментов из контекста md-sidenav-layout, но это то, что обрабатывает анимацию и переход, чтобы сделать панель инструментов и сиденов последовательными, когда вы переключаете sidenav.

Мой CSS-фу не сильно. Может быть, я что-то упустил. У любого органа есть идеи о том, как это исправить? В этот момент можно приветствовать любые рабочие встречи, пока я получаю желаемый эффект.

Адрес Plunker.

Answer 1

Вы должны поместить содержимое в список .... Это не только обходной путь, но я на самом деле делаю это сам каждый раз, когда мне нужен такой макет, потому что более естественно иметь полосу прокрутки внутри того, что вы собираетесь прокручивать. Если содержимое боковой панели слишком велико, для этого также должен иметь свой собственный контекст прокрутки.

Не знаете, почему материальная команда реализовала его таким образом, но, возможно, наличие фиксированной панели инструментов будет по умолчанию в окончательной версии при использовании с макетом сиденва (или, по крайней мере, у нас будет возможность для этого, я надеюсь).

Во всяком случае, я обновил свой 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; 
}