Angular Material md-toolbar 不粘（md-scroll-shrink）
Posted
技术标签:
【中文标题】Angular Material md-toolbar 不粘（md-scroll-shrink）【英文标题】：Angular Material md-toolbar not sticking (md-scroll-shrink) 【发布时间】：2016-07-11 08:24:32 【问题描述】：我在我的页面上使用了<md-subheader md-scroll-shrink>，但是当用户向下滚动时它不会粘在顶部（就像在scroll shrink demo 中一样）。
有什么想法吗？也许是我的布局导致了问题？
<body>
<div>
<md-toolbar md-scroll-shrink>
<div>
<md-sidenav>
<md-content>
<section>
<md-subheader>
...
这是codepen。
【问题讨论】：
【参考方案1】：是的，您的布局有问题。我做了一点重组。见http://codepen.io/anon/pen/VabdzW
<div ng-app="MyApp" layout="column" ng-controller="MainCtrl as main" ng-cloak layout-fill>
<md-content flex layout="column">
<md-toolbar flex="50">
...
</md-toolbar>
<div layout="row">
<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" layout-padding md-whiteframe="4">
..
</md-sidenav>
<md-content layout="column" layout-padding flex>
..real content
</md-content>
</div>
</md-content>
</div>
【讨论】：
谢谢！根据您的回答，只需将layout="column" layout-fill 添加到顶部div 即可。【参考方案2】：
检查这个example
<div ng-app="MyApp">
<div layout="column" ng-controller="MainCtrl as main" ng-cloak>
<md-sidenav md-component-id="left" class="md-sidenav-left" md-swipe-left="toggleSidenav()" >
<md-menu-item>
menu
</md-menu-item>
</md-sidenav>
<md-content flex>
<md-toolbar>
<div class="md-toolbar-tools" >
<md-button class="md-icon-button" aria-label="Menu" ng- click="toggleSidenav()">
<md-icon>menu</md-icon>
</md-button>
<span flex>
<a class="md-title" href="">H3 TiP</a>
<span class="report-subtitle md-subhead">Sample Report</span>
</span>
</div>
</md-toolbar>
<md-content layout="column" layout-padding flex> content
</md-content>
</md-content></div></div>
【讨论】：
以上是关于Angular Material md-toolbar 不粘（md-scroll-shrink）的主要内容，如果未能解决你的问题，请参考以下文章
AngularCLI 和 Angular Material（原理图）错误：无法解析集合“@angular/material”
Angular2 Material：Angular 材质输入的自定义验证