当我尝试将md-toolbar停留在最高位置时，它无法正常工作。我在AngularJS中使用$mdSticky服务创建了一个自定义指令。
var app=angular.module('app',['ngMaterial']);
app.controller('test',function(){
});
app.directive('sticky', Sticky)
function Sticky($mdSticky) {
return {
restrict: 'A',
link: function (scope, element) {
$mdSticky(scope, element);
console.log('log sticky..');
}
}
}<html ng-app="app">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<md-toolbar class="md-hue-2" md-whiteframe="2" sticky>
<h1>testing sticky</h1>
</md-toolbar>
<md-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor magna, ornare ut ipsum vitae, venenatis fermentum est. Vestibulum viverra augue at venenatis rutrum. Duis iaculis et mi eget pharetra. Curabitur a faucibus est. Nulla fermentum imperdiet eleifend. Donec maximus rutrum erat, sit amet dictum diam tempor vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget lacus tincidunt, eleifend orci non, finibus lacus. Proin blandit nisi libero, non vestibulum nunc viverra a. Fusce efficitur risus non sem dignissim, ut varius odio pulvinar. Quisque et orci eleifend, lobortis erat vitae, feugiat elit. Vestibulum laoreet auctor mauris, sit amet faucibus felis. Phasellus pretium dui ipsum, a posuere augue tempus vitae. Ut ornare, nulla in vestibulum egestas, velit tortor accumsan diam, id aliquet velit urna ut ligula. Vestibulum tempus aliquam aliquam.Aenean vestibulum diam eget condimentum sollicitudin. Etiam metus urna, fringilla a pharetra rhoncus, bibendum in lacus. Ut posuere laoreet odio in tincidunt. Vivamus congue felis vestibulum eros mattis, a ullamcorper ligula molestie. Sed non feugiat mauris, varius consequat velit. Aliquam dignissim tellus turpis, et ornare enim laoreet eget. Curabitur finibus lacus vitae felis blandit tempus. Pellentesque blandit ut velit id pharetra. Etiam at metus urna. Mauris ac ligula laoreet, cursus urna varius, efficitur dui. Cras id urna dolor. In blandit, lacus at fermentum facilisis, nibh orci rhoncus justo, nec sodales magna metus sit amet libero.Etiam in sodales odio. Vestibulum congue venenatis velit, sed tristique sapien tristique id. Cras eu blandit lacus. Phasellus viverra ut risus a ornare. Curabitur luctus dapibus odio vel pretium. Vivamus dolor massa, hendrerit eu neque non, vestibulum consectetur orci. Proin porttitor vitae sem a imperdiet.Donec efficitur ultricies enim, ac consequat quam pulvinar eget. Ut ligula odio, sollicitudin eu viverra ac, varius eu ligula. Fusce lectus tortor, efficitur et consequat vitae, aliquam a ante. Phasellus hendrerit purus faucibus felis eleifend, in lacinia leo euismod. Sed blandit nisl nec vehicula egestas. Etiam mauris justo, malesuada quis varius tincidunt, ullamcorper eget ante. Phasellus dolor ipsum, fringilla in aliquam non, aliquet vitae dolor. Nulla ut velit ipsum. Nulla auctor massa pretium imperdiet finibus. Curabitur vulputate risus quis convallis rhoncus.Curabitur nunc dolor, ultrices a ipsum nec, pretium varius libero. Fusce cursus vehicula tortor, ac consequat mauris ultricies eu. Nunc et justo efficitur, blandit turpis quis, feugiat enim. Phasellus accumsan libero vitae tellus ultricies, eu porta ligula vestibulum. Maecenas a nunc nibh. Suspendisse finibus tempor sem eget vulputate. Nullam cursus magna quam, ac accumsan turpis pulvinar sed. Suspendisse rutrum tristique diam eu elementum.Pellentesque at rutrum mauris. Nulla facilisi. Curabitur quis venenatis mi. Praesent ac magna fermentum, lobortis metus ac, condimentum lacus. Etiam vel sem sit amet velit dictum aliquet. Nunc dapibus metus et pretium vestibulum. Sed enim quam, sollicitudin auctor turpis vitae, mollis pulvinar tellus. Vestibulum pretium tortor at dolor venenatis ultrices. Sed dictum urna sit amet porttitor aliquam. Nullam in efficitur lacus, vitae viverra velit. Etiam mattis eu ligula sed gravida. Phasellus eget tellus mauris. Donec a orci faucibus, fringilla lorem vitae, luctus dui.Aliquam risus risus, porttitor aliquam orci at, ultricies tempor metus. Nunc congue, metus id dignissim dignissim, ex tellus maximus magna, feugiat rhoncus nunc orci vel orci. Etiam nunc justo, pellentesque ac lectus eget, feugiat vehicula nibh. Fusce eget egestas nunc. Aliquam aliquam eget magna vel blandit. Vestibulum sagittis nisl elementum nunc auctor rutrum. Duis facilisis purus sit amet urna blandit, id egestas diam blandit. Phasellus tincidunt laoreet velit, et ornare quam. Suspendisse ultrices, mauris quis mattis aliquam, erat odio suscipit quam, nec rutrum tellus tortor et erat. Maecenas felis erat, eleifend a tempor sed, tempor eget nisi.Mauris vehicula diam a libero pretium, in consectetur quam sollicitudin. Phasellus quis lacinia sapien, ut gravida libero. Etiam sapien eros, sodales vitae cursus ac, vehicula nec tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac quam placerat, pharetra leo nec, feugiat nunc. Nullam mattis a mi sed rhoncus. Donec orci magna, facilisis tempor turpis gravida, tincidunt bibendum ante. Quisque cursus at lorem vel ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris posuere eu enim ut iaculis.In vel magna sit amet eros varius interdum vel eget ipsum. Suspendisse vulputate eu urna sit amet tincidunt. Quisque sit amet pulvinar justo. Vivamus aliquam sapien pellentesque nisl pharetra posuere. Fusce vitae arcu lectus. Sed viverra, lorem at finibus sodales, lectus ex luctus eros, quis tincidunt arcu est ut mauris. Nunc efficitur, ante sit amet pulvinar pretium, tortor erat facilisis turpis, vitae rutrum enim nisi semper diam. Quisque bibendum sem libero, ut molestie quam suscipit dapibus. Sed condimentum malesuada tincidunt. Sed mattis et mi eu ultrices. Pellentesque finibus sem velit, et tristique turpis ultricies sed. Nam sed mollis erat. Morbi venenatis dui sit amet nisl lacinia tincidunt. Nunc blandit blandit elementum. Suspendisse sit amet interdum nisi.In sed elit a libero dapibus tristique quis ut ipsum. Suspendisse congue massa eget condimentum efficitur. Quisque non faucibus orci. In hac habitasse platea dictumst. Praesent at eleifend magna, quis tincidunt orci. Maecenas a purus porttitor, pretium ipsum pellentesque, dictum urna. Praesent luctus nisl in eros volutpat convallis. Donec vitae lacus quam. Donec tempor, leo ut laoreet placerat, dolor enim lobortis sapien, sed maximus odio tellus vehicula massa. Cras et augue dolor. Cras feugiat mi et mauris mattis, a mollis massa placerat. Nulla condimentum, leo et feugiat porttitor, libero sapien malesuada nibh, eu volutpat erat eros sed purus. Fusce tincidunt cursus tempor. Praesent vitae venenatis tellus, a ornare velit. Proin accumsan accumsan ultrices.
</p>
</md-content>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
</body>
</html>最佳答案
问题取决于$mdSticky本身。 documentation说了暂时不正确的内容。 $mdSticky仍在使用CSS属性position: sticky，即使浏览器不支持。
摘自$mdSticky文档：
每当当前浏览器本地支持粘性时，$ mdSticky服务将仅使用本地浏览器粘性。
这个简单的fiddle demo将帮助您检查它。这是角度材料GitHub页面上的一些interesting issue。
我建议退回position: fixed并尝试使用简单的窗口滚动事件指令通过“旧派方式”解决您的问题，例如：
var app = angular.module('myApp', []);
app.directive('fixed', function ($window) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var topClass = attrs.fixed,
offsetTop = element[0].offsetTop;
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= offsetTop) {
element.addClass(topClass);
} else {
element.removeClass(topClass);
}
});
}
};
});.fixIt {
position: fixed;
top: 0;
}
.header {
height:25px;
width:100%;
border: 1px solid red;
}
.content {
height:1500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
<div class="header" fixed="fixIt">
</div>
<div class="content">
some content
</div>
</div>关于javascript - AngularJS Material $ mdSticky无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42593718/