Skip to content

Instantly share code, notes, and snippets.

@winkerVSbecks

winkerVSbecks/Sprout-Shrinking-Header.markdown

Created May 29, 2014 00:55
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save winkerVSbecks/e69385000b4e23e28411 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Varun Vachhar.
Raw
index.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>
<div class="bar bar-subheader bar-assertive">
<h2 class="title">Sub Header</h2>
</div>
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-navicon"></button>
</div>
<h1 class="title">Sprout</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
script.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(subHeader, header, amt, dir) {
ionic.requestAnimationFrame(function() {
//amt = 2.0*Math.round(amt/2.0);
if(dir === 1) {
var _amt = Math.min(44, amt - 44);
} else if(dir === -1) {
var _amt = Math.max(0, amt - 44);
}
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0,-' + _amt + 'px, 0)';
subHeader.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 subHeader = $document[0].body.querySelector('.bar-subheader');
var headerHeight = header.offsetHeight;
var subHeaderHeight = subHeader.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 + subHeaderHeight - Math.max(0, (starty + headerHeight + subHeaderHeight) - e.detail.scrollTop);
// Start shrink
shrink(subHeader, header, Math.min(88, shrinkAmt), dir);
// Save prev shrink amount
prevShrinkAmt = Math.min(88, shrinkAmt);
}
// If scrolling down
else {
// Calculate expansion amount
shrinkAmt = prevShrinkAmt - Math.min(88, (starty - e.detail.scrollTop));
shrink(subHeader, header, shrinkAmt, dir);
}
prevDir = dir;
prev = e.detail.scrollTop;
});
}
}
});
Raw
style.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;
}
.bar-subheader {
top: 64px !important;
}
.scroll-content{
top: 0 !important;
padding-top: 44px !important
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment