I am having a trouble with shrinking header.
The bar-header does scroll up as expected but the view title doesn’t move.
my JS:
.directive('fakeStatusbar', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="fake-statusbar"><div class="pull-left">Carrier</div><div class="time">3:30 PM</div><div class="pull-right">50%</div></div>'
}
})
.directive('headerShrink', function($document) {
var fadeAmt;
var shrink = function(header, content, amt, max) {
amt = Math.min(44, amt);
fadeAmt = 1 - amt / 44;
ionic.requestAnimationFrame(function() {
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
for(var i = 0, j = header.children.length; i < j; i++) {
header.children[i].style.opacity = fadeAmt;
}
});
};
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){
// Start shrinking
shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
shrink(header, $element[0], shrinkAmt, headerHeight);
} else {
shrink(header, $element[0], 0, headerHeight);
}
});
}
}
})
my CSS:
.fake-statusbar {
height: 20px;
max-height: 20px;
font-size: 12px;
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4;
color: #fff;
padding: 2px 3px 3px 3px;
}
.fake-statusbar .time {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.fake-statusbar .pull-left { float: left; }
.fake-statusbar .pull-right { float: right; }
.bar-header {
height: 64px !important;
}
.bar-header > * {
margin-top: 20px !important;
}
.scroll-content{
top:0 !important
}
any one know where i am going wrong ?
