Ionic hide nav bar
http://stackoverflow.com/questions/35053523/how-to-hide-header-bar-in-ionic
- snippet.javascript
<script id="templates/home.html" type="text/ng-template"> <ion-view title="Home" hide-nav-bar="true"> <ion-content padding="true"> <p>Test</p> </ion-content> </ion-view> </script>
https://forum.ionicframework.com/t/hide-navbar-tabs-when-scrolling-down-like-instagram/10197/2
- snippet.javascript
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); } }); } } })