diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 90312ca..113573b 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -1,49 +1,45 @@ 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', function($ionicScrollDelegate) { return { restrict: 'A', link: function($scope, $element, $attr) { - var starty = $scope.$eval($attr.headerShrink) || 0; - var shrinkAmt; - - var amt; - var y = 0; var prevY = 0; var scrollDelay = 0.4; + var lastContentTop = 0; var fadeAmt; - var header = $document[0].body.querySelector('.bar-header'); + var element = $element[0]; + var header = $element.parent()[0].querySelector('.bar-header'); var headerHeight = header.offsetHeight; function onScroll(e) { var scrollTop = e.detail.scrollTop; + var contentTop = 0; if(scrollTop >= 0) { y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)); + contentTop = headerHeight - y; + + if (contentTop < 0) { + contentTop = 0; + } } else { y = 0; + contentTop = headerHeight; } - console.log(scrollTop); ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; + + if (contentTop !== lastContentTop) { + element.style.top = (lastContentTop = contentTop) + 'px'; + $ionicScrollDelegate.resize(); + } + for(var i = 0, j = header.children.length; i < j; i++) { header.children[i].style.opacity = fadeAmt; }