I have an element for an Ionic app that is larger than the standard `bar` and `bar-header` sizes (44px), and cannot be fixed height. I want this to appear above my body content but still that content to be scrollable. Other solutions didn't offer enough functionality so this is my implementation that worked. It gets the fixed element's height, a…

fixedIonContent.js

angular.module('fixedIonContent.directive', [])
.directive('fixedIonContent', function($timeout){
  return {
    restrict: 'A',
    link: link
  };
  function link(_scope, element) {
    var parent = angular.element(element[0].parentNode),  // ion-view, usually
        content = parent[0].getElementsByTagName('ion-content')[0]; // Should only ever be one
    $timeout(function(){
      setContentOffset(element[0].clientHeight);
    },0); // Wait for DOM load
    /* Watch for changes and update if needed */
    _scope.$watch (
      function () { return element[0].clientHeight; },
      function (newHeight) {
        setContentOffset(newHeight);
      }
    );
    function setContentOffset(val){
      content.style.top = val + 'px';
    }
  }
});

template.html

<ion-view>
  <ion-header-bar fixed-ion-content>
    <h1 class="text-center">{{ vm.title }}</h1>
  </ion-header-bar>
  <ion-content>
    <!-- Content goes here -->
  </ion-content>
</ion-view>