如何在Material Angular中向下滚动时更改md-whiteframe值
问题描述:
我是Material Angular的新手,刚开始在一个月前使用它,因此这可能是一个简单的问题。无论如何,我有一个工具栏设置为0的白色框架。当我在我的md内容中向下滚动时,我想将白色框架值更改为2或4,或者只是另一个数字,因此给它一个影子。我也想让它动画,而不是让影子眨眼/出现。一个例子就是Google Fonts网站。如果你看下面的图片,你会在工具栏下看到一行。然后在下面的图片显示,当你滚动它变成一个影子。 上面的大纲。 阴影以上。如何在Material Angular中向下滚动时更改md-whiteframe值
我会尝试投入时间检查他们的CSS,JS和HTML,但我实际上正在为下周五的学校项目工作,并且我必须输入一堆内容并收集信息。
我能够使阴影出现在md-content的底部,但是当我向下滚动时,通过添加带有阴影的css选择器,我无法弄清楚如何更改滚动上的md-whiteframe值。
我试图使用一个变量。像md-whiteframe="{{ctrl.elevation}}"
然后说类似
if(item.scrolltop > 0) {
this.elevation = 0;} else {
this.elevation = 4;}
我想类似的东西在我的JS,但它只是结束了作为一个烂摊子。这不是一个大问题,我只是试图给我的项目一些不错的方面。我真的很感激任何帮助。先谢谢你。此外,我寻找类似的问题,并没有找到任何我想要的,但如果你发现一个问题,回答这个问题,那么请告诉我。
答
尝试对md-whiteframe指令的类属性进行操作。 例如:
<md-whiteframe class="{{ctrl.elevationClass}}">
<span>My content</span>
</md-whiteframe>
在您的控制器:
if(item.scrolltop > 0) {
this.elevationClass = 'md-whiteframe-1dp';
} else {
this.elevationClass = 'md-whiteframe-4dp';
}