diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 90312ca..4cc154f 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -1,59 +1,60 @@ angular.module('ionic.ion.headerShrink', []) -.directive('headerShrink', function($document) { +.directive('headerShrink', function($document, $timeout, $ionicScrollDelegate) { 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; - } - }); - }; - return { restrict: 'A', link: function($scope, $element, $attr) { - var starty = $scope.$eval($attr.headerShrink) || 0; - var shrinkAmt; - - var amt; + var scrollContent = $element.find('ion-content'); var y = 0; var prevY = 0; var scrollDelay = 0.4; - var fadeAmt; - - var header = $document[0].body.querySelector('.bar-header'); - var headerHeight = header.offsetHeight; - - function onScroll(e) { - var scrollTop = e.detail.scrollTop; - - if(scrollTop >= 0) { - y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)); - } else { - y = 0; + var headerHeight = 0; + var headers = []; + + + // look for multiple headers when using a ion-navbar or sidemenu + headers = $document[0].body.querySelectorAll('[nav-bar] > .bar-header'); + + // if there are not mulitple headers query for a single one + if (headers.length == 0) { + headers = $document[0].body.querySelectorAll('.bar-header'); + } + + headerHeight = headers[0].offsetHeight; + + $scope.$on('$ionicView.afterEnter', function() { + for(var k = 0, l = headers.length; k < l; k++) { + headers[k].style[ionic.CSS.TRANSFORM] = 'translate3d(0, 0, 0)'; + headers[k].style.opacity = 1; } - console.log(scrollTop); - ionic.requestAnimationFrame(function() { - fadeAmt = 1 - (y / headerHeight); - header.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; + scrollContent.on("scroll", function(e) { + var scrollTop = e.detail.scrollTop; + + // 20 px offset + if(scrollTop >= 25) { + y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)); + } else { + y = 0; } - }); - prevY = scrollTop; - } + ionic.requestAnimationFrame(function() { + fadeAmt = 1 - (y / headerHeight); + for(var k = 0, l = headers.length; k < l; k++) { + headers[k].style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; + headers[k].style.opacity = fadeAmt; + } + + }); + + prevY = scrollTop; + }); + }); - $element.bind('scroll', onScroll); } } }) -