Skip to content
This repository was archived by the owner on Nov 25, 2022. It is now read-only.

Fix header selector #6

Open
vitalyrotari wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Fix header selector #6

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a28d6d
Fix header selector
vitalyrotari Feb 12, 2015
bf2e716
Remove unused code
vitalyrotari Feb 12, 2015
9f8735e
Update ion-content top position
vitalyrotari Feb 12, 2015
6dfcaa9
Resize ionic scroll when top position is changed
vitalyrotari Feb 12, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 17 additions & 21 deletions ionic.headerShrink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down