From b89956b0141323db8dbc8fd64a7a139c88055327 Mon Sep 17 00:00:00 2001 From: Devin Despain Date: Tue, 28 Jul 2015 01:11:54 -0600 Subject: [PATCH 1/3] Adds behavior to float the bar-subheader class and sticks the subheader to the top of the div when the header is hidden --- ionic.headerShrink.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 90312ca..8677756 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -29,7 +29,9 @@ angular.module('ionic.ion.headerShrink', []) var fadeAmt; var header = $document[0].body.querySelector('.bar-header'); + var subheader = $document[0].body.querySelector('.bar-subheader'); var headerHeight = header.offsetHeight; + var subheaderHeight = subheader.offsetHeight; function onScroll(e) { var scrollTop = e.detail.scrollTop; @@ -44,6 +46,9 @@ angular.module('ionic.ion.headerShrink', []) ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; + if(y <= headerHeight){ + subheader.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; } From 8947e7fd2c2b917151640f3d1f23ceac21bff9b6 Mon Sep 17 00:00:00 2001 From: Devin Despain Date: Tue, 28 Jul 2015 01:41:57 -0600 Subject: [PATCH 2/3] Fixes error if subheader is not used --- ionic.headerShrink.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 8677756..dc95e84 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -31,7 +31,6 @@ angular.module('ionic.ion.headerShrink', []) var header = $document[0].body.querySelector('.bar-header'); var subheader = $document[0].body.querySelector('.bar-subheader'); var headerHeight = header.offsetHeight; - var subheaderHeight = subheader.offsetHeight; function onScroll(e) { var scrollTop = e.detail.scrollTop; @@ -46,7 +45,7 @@ angular.module('ionic.ion.headerShrink', []) ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; - if(y <= headerHeight){ + if(y <= headerHeight && subheader){ subheader.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; } for(var i = 0, j = header.children.length; i < j; i++) { From b44c658e2374b501b7c95ec9467bbdacd605c4aa Mon Sep 17 00:00:00 2001 From: Devin Despain Date: Tue, 28 Jul 2015 02:49:13 -0600 Subject: [PATCH 3/3] This seems to fix the jitter between the header and subheader on scroll --- ionic.headerShrink.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index dc95e84..65297dc 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -44,10 +44,13 @@ angular.module('ionic.ion.headerShrink', []) ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); - header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; + if(y <= headerHeight && subheader){ - subheader.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; + subheader.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -(y+0.1) + 'px, 0)'; } + + 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; }