Does anyone have a working example of using the header-shrink directive with the latest TABS project running Ionic beta 14 on Android? I’ve modified the directive some and used some influence from http://codepen.io/rossmartin/pen/pvjRaO
and modified
ionic.requestAnimationFrame(function() {
fadeAmt = 1 - (y / headerHeight);
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';
if (ionic.Platform.isAndroid() == true) {
tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';
} else {
tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + y + 'px, 0)';
}
for(var i = 0, j = header.children.length; i < j; i++) {
header.children[i].style.opacity = fadeAmt;
tabs.children[i].style.opacity = fadeAmt;
}
this provides the correct movement of the Y-axis for the tabs positioned on Android (top by default) to move up with the header and on iOS to move down.
I’m trying to pin the tabs to the top of the view on scrolling in Android. I just have no clue on how to achieve this effect. Any help appreciated.