Skip to content

Instantly share code, notes, and snippets.

@winkerVSbecks

winkerVSbecks/shrinkExpandHeader.css

Created May 23, 2014 03:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save winkerVSbecks/3a35761739ed6adc1f51 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save winkerVSbecks/3a35761739ed6adc1f51 to your computer and use it in GitHub Desktop.
Download ZIP
Shrinking and Expanding Header
Raw
shrinkExpandHeader.css
.fake-statusbar {
height: 20px;
max-height: 20px;
font-size: 12px;
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4;
color: #fff;
padding: 2px 3px 3px 3px;
}
.fake-statusbar .time {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.fake-statusbar .pull-left { float: left; }
.fake-statusbar .pull-right { float: right; }
.bar-header {
height: 64px !important;
}
.bar-header > * {
margin-top: 20px !important;
}
.scroll-content{
top:0 !important
}
Raw
shrinkExpandHeader.html
<html ng-app="ionic.example"><head>
<meta charset="utf-8">
<title>Popups</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script>
</head>
<body>
<fake-statusbar></fake-statusbar>
<ion-pane>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon ion-navicon"></button>
</div>
<h1 class="title">Things</h1>
</ion-header-bar>
<ion-content header-shrink scroll-event-interval="5">
<div style="height: 64px;"></div>
<div class="list card">
<div class="item item-avatar">
<img src="http://ionicframework.com/img/docs/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="http://ionicframework.com/img/docs/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="http://ionicframework.com/img/docs/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Raw
shrinkExpandHeader.js
angular.module('ionic.example', ['ionic'])
.directive('fakeStatusbar', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="fake-statusbar"><div class="pull-left">Carrier</div><div class="time">3:30 PM</div><div class="pull-right">50%</div></div>'
}
})
.directive('headerShrink', function($document) {
var fadeAmt;
var shrink = function(header, content, amt, max) {
ionic.requestAnimationFrame(function() {
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0,-' + amt + 'px, 0)';
});
};
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var starty = $scope.$eval($attr.headerShrink) || 0;
var shrinkAmt;
var header = $document[0].body.querySelector('.bar-header');
var headerHeight = header.offsetHeight;
var prev = 0
, delta = 0
, dir = 1
, prevDir = 1
, prevShrinkAmt = 0;
$element.bind('scroll', function(e) {
delta = e.detail.scrollTop - prev;
dir = delta >= 0 ? 1 : -1;
// Capture change of direction
if(dir !== prevDir)
starty = e.detail.scrollTop;
// If scrolling up
if(dir === 1) {
// Calculate shrinking amount
shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - e.detail.scrollTop);
// Start shrink
shrink(header, $element[0], Math.min(44, shrinkAmt), headerHeight);
// Save prev shrink amount
prevShrinkAmt = Math.min(44, shrinkAmt);
}
// If scrolling down
else {
// Calculate expansion amount
shrinkAmt = prevShrinkAmt - Math.min(44, (starty - e.detail.scrollTop));
shrink(header, $element[0], shrinkAmt, headerHeight);
}
prevDir = dir;
prev = e.detail.scrollTop;
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment