to lower the head should change color, but the change is not seen, if I open the menu only then change can be seen.
<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;
}
http://virtual-host-discourse.global.ssl.fastly.net/uploads/ionicframework/optimized/2X/7/7fcbaa68a40008e90de10292d80559c3eb5e17bf_1_326x500.gif
my assumption is that the digest loop is not processed when you affect $scope.isActive
.
Try to wrap it into a $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)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With