ionic top tab shrink

.directive('headerShrink', function($document) {
      return {
        restrict: 'A',
        link: function($scope, $element, $attr) {
          var y = 0,
            prevY = 0,
            scrollDelay = 0.4,
            scrollTop,
            fadeAmt;

          var header = $document[0].body.querySelector('.bar-header');
          var tabs = $document[0].body.querySelector('div.tabs');
          var ionTabs = angular.element($document[0].body.querySelector('ion-tabs'));
          var toTop = ionTabs.hasClass('tabs-top');
          var headerHeight = header.offsetHeight;

          setTimeout(function(){
              $element.removeClass('has-tabs-top');
          }, 500);

          function onScroll(e) {
            scrollTop = e.detail.scrollTop;
            y = (scrollTop >= 0) ? Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)) : 0;
            ionic.requestAnimationFrame(function() {
              fadeAmt = 1 - (-y / headerHeight);
              tabs.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';
              for (var i = 0, j = header.children.length; i < j; i++) {
                tabs.children[i].style.opacity = fadeAmt;
              }
            });
            prevY = scrollTop;
          }

          $element.bind('scroll', onScroll);
        }
      }
    })

how do we use it