A quick demo of a shrinking header, like
Created
February 15, 2016 22:01
-
-
Save yoimbert/cee725e618214a81dea2 to your computer and use it in GitHub Desktop.
Shrinking Header: Nightly
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="ionic.example"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Shrinking Header</title> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/nightly/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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) { | |
| amt = Math.min(44, amt); | |
| fadeAmt = 1 - amt / 44; | |
| 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 header = $document[0].body.querySelector('.bar-header'); | |
| var headerHeight = header.offsetHeight; | |
| $element.bind('scroll', function(e) { | |
| var scrollTop = null; | |
| if(e.detail){ | |
| scrollTop = e.detail.scrollTop; | |
| }else if(e.target){ | |
| scrollTop = e.target.scrollTop; | |
| } | |
| if(scrollTop > starty){ | |
| // Start shrinking | |
| shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop); | |
| shrink(header, $element[0], shrinkAmt, headerHeight); | |
| } else { | |
| shrink(header, $element[0], 0, headerHeight); | |
| } | |
| }); | |
| } | |
| } | |
| }) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment