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>