如何在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，但它只是结束了作为一个烂摊子。这不是一个大问题，我只是试图给我的项目一些不错的方面。我真的很感激任何帮助。先谢谢你。此外，我寻找类似的问题，并没有找到任何我想要的，但如果你发现一个问题，回答这个问题，那么请告诉我。

来源

2016-12-14 Anthony

尝试对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'; 
}

https://material.angularjs.org/latest/demo/whiteframe

来源

2016-12-14 15:52:13 Mattex83

如何在Material Angular中向下滚动时更改md-whiteframe值

回答

相关问题