CSS changes are not applied immediately - please help

ionic-v1
1

to lower the head should change color, but the change is not seen, if I open the menu only then change can be seen

image
problemacss.gif429×657 675 KB

2

add !important and check if
this will work

3

as usual, the change applies only if the menu opens

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

code:

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

css:

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

Would you be able to make a codepen? It would help find the issue much faster.