CSS changes are not applied immediately

Question

to lower the head, it is necessary to change the color, but the changes are not visible if I open the menu, and then you can see the change.

<ion-header-bar class="thediv" ng-class="{scrolling: isActive}"> <ion-nav-bar class="bar-clear " > </ion-nav-bar> </ion-header-bar> 

my class:

 .scrolling{ background-color: red !important; } 

and code:

 if ($ionicScrollDelegate.$getByHandle('contentScroll').getScrollPosition().top > 100) { $scope.isActive = true; } else { $scope.isActive = false; } 

Demo

http://virtual-host-discourse.global.ssl.fastly.net/uploads/ionicframework/optimized/2X/7/7fcbaa68a40008e90de10292d80559c3eb5e17bf_1_326x500.gif

Answer 1

My assumption is that the digest loop is not processed when you $scope.isActive .

Try wrapping it in $timeout (don't forget to add $timeout as a dependency)

 if ($ionicScrollDelegate.$getByHandle('contentScroll').getScrollPosition().top > 100) { $timeout(function(){ $scope.isActive = true; },0) } else { $timeout(function(){ $scope.isActive = false; },0) }