如何在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值

回答

相關問題