Angular Material md-toolbar 不粘（md-scroll-shrink）答案

【问题标题】：Angular Material md-toolbar not sticking (md-scroll-shrink)Angular Material md-toolbar 不粘（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。

【问题讨论】：

标签： javascript html angularjs angular-material

【解决方案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>

【讨论】：