2016-06-12 21 views
0

私は以下のイオンHTMLコードを持っています。イオン・イオン・ビュー・バーの背景色を変更できませんか?

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

、次のコードion-nav-barの背景色を変更するために使用されます。ただし、背景色は変更できません。私はテストのために背景色のインラインスタイルを入れても、まだ動作しませんか?

.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 + ')'; 
       // }); 
      }); 
     } 
    } 
}) 

答えて

0

alphaの値は、j​​avacriptを使用して背景色に直接割り当てることはできません。あなたはこの答えに記載されている解決策を使うことができます:https://stackoverflow.com/a/8179307/3878940

+0

SO答えでは、これも 'this.style.backgroundColor =" rgba( "+ [match [1]、match [2]、match [3] ]、a] .join( '、')+ ")"; "私が行ったのと同じ方法でbackgroundColorを割り当てますか? – ca9163d9

+0

ケースのアルファ値が浮動小数点数<1? –

+0

はい、Chromeのデバッグでは、1より小さいか等しいことを示しています。 – ca9163d9

関連する問題