5

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;
}

Demo

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

2
  • 2
    The question is not clear. Can you please share a fiddle?
    – Navaneet
    Commented Jun 12, 2015 at 14:32
  • Hmm, interesting idea, not sure how to fix it, if I were you I would try to figure out how the $watch, $digest, and $apply are handling it. If it is not updating right when you start to scroll that may be an issue. You could also try to maybe do a $broadcast event when scrolling starts and then apply the class based on that the event. Just some ideas, let me know if you get it working! Commented Jun 12, 2015 at 14:46

1 Answer 1

2

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)
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.