From 9dd667e27828a1f202afafcb85c12adee10e4d52 Mon Sep 17 00:00:00 2001 From: Ross Martin Date: Tue, 7 Apr 2015 11:55:44 -0500 Subject: [PATCH] account 20px for ios statusbar. fix selector for view caching --- ionic.headerShrink.js | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 90312ca..c3ffe8f 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -1,22 +1,10 @@ angular.module('ionic.ion.headerShrink', []) -.directive('headerShrink', function($document) { - var fadeAmt; - - var shrink = function(header, content, amt, max) { - amt = Math.min(max, amt); - fadeAmt = 1 - amt / max; - 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; - } - }); - }; - +.directive('headerShrink', ['$ionicPlatform', '$document', function($ionicPlatform, $document) { return { restrict: 'A', link: function($scope, $element, $attr) { + var isIos = false; var starty = $scope.$eval($attr.headerShrink) || 0; var shrinkAmt; @@ -28,8 +16,15 @@ angular.module('ionic.ion.headerShrink', []) var fadeAmt; - var header = $document[0].body.querySelector('.bar-header'); + var header = $document[0].body.querySelector('[nav-view="active"] .bar-header'); var headerHeight = header.offsetHeight; + + $ionicPlatform.ready(function() { + if(device && device.platform.toLowerCase() === 'ios') { + isIos = true; + headerHeight -= 20; // account 20px for the ios status bar + } + }); function onScroll(e) { var scrollTop = e.detail.scrollTop; @@ -39,7 +34,10 @@ angular.module('ionic.ion.headerShrink', []) } else { y = 0; } - console.log(scrollTop); + + if (isIos && y > headerHeight) { + y = headerHeight; // must leave 20px for the ios status bar + } ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); @@ -55,5 +53,4 @@ angular.module('ionic.ion.headerShrink', []) $element.bind('scroll', onScroll); } } -}) - +}])