I’m build app background transparent in ion-view (header bar) and when scroll in ion-concent change background to color rgba() but didn’t work in device or emulator, in browser only first load like this
still have white color or blank, and in device or emulator still white color.
And in device not work if using directive source like this:
<ion-view class="no-header">
<ion-content class="no-header" header-shrink scroll-event-interval="5">
<div class="">
<img class="back_header_image" src="img/delorean.jpg">
<img class="logo-circle" src="img/mcfly.jpg">
</div>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
<div class="item item-avatar">
<img src="img/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
<div class="x">B</div>
</div>
<div class="item item-body">
<img class="full-image" src="img/delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</ion-content>
<div class="n button" ng-click="showAlert()">
<i class="icon ion-thumbsup"></i>
</div>
</ion-view>
and directive
.directive('headerShrink', function($document) {
var fadeAmt;
var shrink = function(header, content, amt, max, t) {
amt = Math.min(44, amt);
fadeAmt = 1 - amt / 44;
ionic.requestAnimationFrame(function() {
header.style ="background-color: "+t;
});
};
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var starty = $scope.$eval($attr.headerShrink) || 0;
var shrinkAmt;
var header = $document[0].body.querySelector('.bar-header');
var headerHeight = header.offsetHeight;
$element.bind('scroll', function(e) {
var scrollTop = null;
if(e.detail){
scrollTop = e.detail.scrollTop;
}else if(e.target){
scrollTop = e.target.scrollTop;
}
if(scrollTop > starty){
shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
shrink(header, $element[0], shrinkAmt, headerHeight, 'rgba(0,255,255,.2');
} else {
shrink(header, $element[0], 0, headerHeight, 'transparent');
}
});
}
}
})
and in css:
.bar-stable{
/*background-color: rgba(255,255,255, 0.1) !important;*/
border-top-width: 0px;
border-bottom-width: 0px;
}
Can someone help me? please?