个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当我尝试将 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 文档:Whenever the current browser supports stickiness natively, the $mdSticky service will just use the native browser stickiness.
这个简单的fiddle demo将帮助您检查它。这是一些interesting issue在 Angular Material GitHub 页面上。
我建议回退到 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/
25
4
0
我在Windows 10中使用一些简单的Powershell代码遇到了这个奇怪的问题，我认为这可能是我做错了，但我不是Powershell的天才。 我有这个: $ix = [System.Net.Dn
var urlsearch = "http://192.168.10.113:8080/collective-intellegence/StoreClicks?userid=" + userId +
我有一个非常奇怪的问题，过去两天一直让我抓狂。 我有一个我试图控制的串行设备(LS 100 光度计)。使用设置了正确参数的终端(白蚁)，我可以发送命令(“MES”)，然后是定界符(CR LF)，然后我
我目前正试图让无需注册的 COM 使用 Excel 作为客户端，使用 .NET dll 作为服务器。目前，我只是试图让概念验证工作，但遇到了麻烦。 显然，当我使用 Excel 时，我不能简单地使用与可
我开发了简单的 REST API - https://github.com/pavelpetrcz/MandaysFigu - 我的问题是在本地主机上，WildFly 16 服务器的应用程序运行正常。
我遇到了奇怪的情况 - 从 Django shell 创建一些 Mongoengine 对象是成功的，但是从 Django View 创建相同的对象看起来成功，但 MongoDB 中没有出现任何数据。
我是 flask 的新手，只编写了一个相当简单的网络应用程序——没有数据库，只是一个航类搜索 API 的前端。一切正常，但为了提高我的技能，我正在尝试使用应用程序工厂和蓝图重构我的代码。让它与 pus
我的谷歌分析 JavaScript 事件在开发者控制台中运行得很好。 但是当从外部 js 文件包含在页面上时，它们根本不起作用。由于某种原因。 例如； 下面的内容将在包含在控制台中时运行。但当包含在单
这是一本名为“Node.js 8 the Right Way”的书中的任务。你可以在下面看到它: 这是我的解决方案: 'use strict'; const zmq = require('zeromq
我正在阅读文本行，并创建其独特单词的列表(在将它们小写之后)。我可以使它与 flatMap 一起工作，但不能使它与 map 的“子”流一起工作。 flatMap 看起来更简洁和“更好”，但为什么 di
我正在编写一些 PowerShell 脚本来进行一些构建自动化。我发现 here echo $? 根据前面的语句返回真或假。我刚刚发现 echo 是 Write-Output 的别名。 写主机 $?
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
我将一个工作 View Controller 类从另一个项目复制到一个新项目中。我无法在新项目中加载 View 。在旧项目中我使用了presentModalViewController。在新版本中，我
我对 javascript 很陌生，所以很难看出我哪里出错了。由于某种原因，我的功能无法正常工作。任何帮助，将不胜感激。我尝试在外部 js 文件、头部/主体中使用它们，但似乎没有任何效果。错误要么出在
我正在尝试学习Flutter中的复选框。 问题是，当我想在Scaffold(body :)中使用复选框时，它正在工作。但我想在不同的地方使用它，例如ListView中的项目。 return Cente
我们当前使用的是 sleuth 2.2.3.RELEASE，我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
我有一个组合框，其中包含一个项目，比如“a”。我想调用该组合框的 Action 监听器，仅在手动选择项目“a”完成时才调用。我也尝试过 ItemStateChanged，但它的工作原理与 Action
你能看一下照片吗？现在，一步前我执行了 this.interrupt()。您可以看到 this.isInterrupted() 为 false。我仔细观察——“这个”没有改变。它具有相同的 ID (1
我们当前使用的是 sleuth 2.2.3.RELEASE，我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
我正在尝试在我的网站上设置一个联系表单，当有人点击发送时，就会运行一个作业，并在该作业中向所有管理员用户发送通知。不过，我在失败的工作表中不断收到此错误: Illuminate\Database\El
我是一名优秀的程序员,十分优秀！