Angular Material md-toolbar 不粘连(md-scroll-shrink) [英] Angular Material md-toolbar not sticking (md-scroll-shrink)
本文介绍了Angular Material md-toolbar 不粘连(md-scroll-shrink)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的页面上使用了 <md-subheader md-scroll-shrink>，但是当用户向下滚动时它并没有粘在顶部(就像在 滚动收缩演示).
有什么想法吗?也许是我的布局导致了问题?
<div><md-toolbar md-scroll-shrink><div><md-sidenav><md-内容><部分><md-子标题>...这是一个 codepen.
解决方案
是的，您的布局有问题.我已经做了一些重组.见 http://codepen.io/anon/pen/VabdzW
<md-content flex layout="column"><md-toolbar flex="50">...</md-工具栏><div layout="row"><md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" 布局填充md-whiteframe="4">..</md-sidenav><md-content layout="column" layout-padding flex>..真实内容</md-content></md-content>
I'm using a <md-subheader md-scroll-shrink> on my page, but it's not sticking to the top when the user scrolls down (like in the scroll shrink demo).
Any ideas? Maybe my layout is causing the problem?
<body>
<div>
<md-toolbar md-scroll-shrink>
<div>
<md-sidenav>
<md-content>
<section>
<md-subheader>
...
Here is a codepen.
解决方案
Yes, there is a problem in your layout. I have done a little bit of restructure. see 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>
这篇关于Angular Material md-toolbar 不粘连(md-scroll-shrink)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
