IONIC下屏幕向上滑动时渐变显示隐藏的标题栏

要达到的效果：

在向上滑动屏幕时渐变显示原本隐藏的标题栏，向下滑动到某个位置时隐藏标题栏。

处理方法：

1、本想用指令来实现，以方便以后的重用，但是碰到几个坑。

2、指令行不通以后，才实现第二种，也是本文介绍的内容。

第一步：

  $scope.show=false;//控制标题栏是否显示
  $scope.transrate=0;//控制标题栏透明度
  $scope.getScrollPosition = function(){
    var position=$ionicScrollDelegate.getScrollPosition().top;//取滑动TOP值
    if (position<=40)//小于等于40像素时隐藏标题
    {
      $scope.transrate=0;
      $scope.show=false;
    }else if (position<=200){//大于40、小于200时显示标题栏，并设置透明度
      $scope.transrate=position/200;
      $scope.show=true;
    }else{
      $scope.transrate=1;
      $scope.show=true;
    }
    $scope.$apply();
  }

第二步：

修改HTML

<ion-view view-title="云商城" hide-nav-bar="true">
  <ion-header-bar align-title="center" class="bar-assertive" ng-if="show==true" style=" opacity: {{transrate}}">
    <a class="button button-clear" ng-click="gochat()"><i class="icon ion-ios-chatbubble-outline headericon" > </i></a>
    <h1 class="title">云商城</h1>
    <a class="button button-clear" ng-click="GoSearch()" style="width: 50px;"><i class="icon icon-uniE65C headericon" > </i></a>
  </ion-header-bar>
  <ion-content  class="mybody" no-tap-scroll="true"  on-scroll="getScrollPosition()">

<span style="white-space:pre">	</span>//略

<pre name="code" class="html">  </ion-content>