要達到的效果：

在向上滑動螢幕時漸變顯示原本隱藏的標題欄，向下滑動到某個位置時隱藏標題欄。

處理方法：

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>