0

I have the following ionic html code.

<ion-nav-bar class="backarrow-bar" style="background-color:rgba(99,99,99,.5)">
    <ion-nav-back-button class="button-clear">
        <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
    </ion-nav-back-button>
</ion-nav-bar>

And the following code is used to change the background-color of the ion-nav-bar. However, the background color cannot be changed. I even put an inline style for background color for testing and it still doesn't work? 

.directive('headerShrink', function ($document) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
            var header = $document[0].body.querySelector('.backarrow-bar');
            var headerHeight = 44;
            $element.bind('scroll', function (e) {
                var scrollTop = e.target.scrollTop;
                var alpha = Math.min(scrollTop / 44, 1);
                // Not working
                header.style.backgroundColor = 'rgba(99,99,99,' + alpha + ')';
                // Not working either
                // ionic.requestAnimationFrame(function () { 
                //    header.style.backgroundColor = 'rgba(0,0,0,' + alpha + ')';
                // });
            });
        }
    }
})
ca9163d9
  • 27,283
  • 64
  • 210
  • 413

1 Answers1

0

You cannot directly assign the alpha value for the background color via javascript. You can use the solution mentioned in this SO answer though: https://stackoverflow.com/a/8179307/3878940

Community
  • 1
  • 1
Aditya Singh
  • 15,810
  • 15
  • 45
  • 67
  • In the SO answer, it also uses `this.style.backgroundColor = "rgba(" + [match[1],match[2],match[3],a].join(',') +")";` to assign the backgroundColor the same way as I did? – ca9163d9 Jun 12 '16 at 09:30
  • Are you sure that the value of alpha in your case is a floating number <1? And have you checked by making the suggested changes – Aditya Singh Jun 12 '16 at 09:36
  • Yes, the debugging in chrome shows its less or equal than 1. – ca9163d9 Jun 12 '16 at 09:40