Marco Marco - 5 months ago 44
HTML Question

Angular changing style on scroll in ionic

I have set up changing of the background for a back arrow on my page. It works fine when I scroll down and then it changes the background as it should, but it is not working after I scroll back to the top, it is not changing back to transparent background. After testing on simulator and real device I have found out that it is only working in browser and not on any other platform.

This is my view:

<div class="back-arrow" style="background-color: {{ background }};">
<a class="button button-icon icon ion-chevron-left" ui-sref="main.front">
</a>
</div>

<ion-content on-scroll="changeArrowBackground()">
...code...
</ion-content>


And this is my controller:

$scope.changeArrowBackground = function(){
console.log($ionicScrollDelegate.getScrollPosition().top == 0);
if ($ionicScrollDelegate.getScrollPosition().top == 0) {
console.log('transparent');
$scope.background = "transparent";
}
else {
console.log('not-transparent');
$scope.background = "#353A41";
}
}


Whenever I scroll it logs correctly based on the position.

Answer

It might not being triggering an angular cycle. Try forcing it with $scope.$apply().

$scope.changeArrowBackground = function(){
    if ($ionicScrollDelegate.getScrollPosition().top == 0) {
      $scope.background = "transparent";
    } else {
      $scope.background = "#353A41";
    }
    $scope.$apply();
}