沉浸式顶部导航栏

原理：

1)要把原理view的默认header隐藏掉，<ion-view view-title="标题" hide-nav-bar='true'>
2)重新定义的<ion-header-bar>要放在</ion-content>之后，因为首先要编译ion-content指令，translucentBar指令才能从继承的父级作用域中获取ion-content的scope.$$childHead.$onScroll函数，所以<ion-header-bar>必须放在</ion-content>之后。

（1）html里

<ion-view view-title="首页" hide-nav-bar='true' >
</ion-view>

（2）html里：

<ion-header-bar class="bar-assertive bar bar-header disable-user-behavior" align-title="center" no-tap-scroll='true' translucent-bar="mycontent" translucent-color-opacity="0.01" translucent-color="rgb(228,32,18)" translucent-scroll-maxtop="88">
    <div class="buttons buttons-left">
        <span class="left-buttons">
            <img ng-click="openLeftContent()" ng-src="{{ userHeadImg }}"
                 style="margin-left: 11px; border-radius: 50%; border:1px solid #fff;width: 35px;" icon-click-round-ripple icon-round-ripple-width="20" icon-round-ripple-color="red"/>
         </span>
    </div>
    <div class="title title-center header-item" style="left: 61px; right: 61px;">
        <span class="nav-bar-title">
            <div class="home_search">
                <div class="item-input-wrapper homeAddSearchLabel">
                    <!--<i class="icon ion-android-search placeholder-icon"></i>-->
                    <input type="text" class="storeGoodsSearchInput ng-pristine ng-untouched ng-valid" placeholder="搜索宝贝" ng-model="inputContent.goodsSearchData">
                    <button class="button button-clear" ng-click="homeGoodsSearch()"><i class="icon ion-android-search placeholder-icon"></i></button>
                </div>
            </div>
        </span>
    </div>
    <div class="buttons buttons-right">
        <span class="right-buttons">
         <img style="width: 32px;margin-right: 8px" src="img/homeScan.png" ng-click="scanPay()">
        </span>
    </div>
</ion-header-bar>

（3）js里：

.directive('translucentBar', ['$ionicScrollDelegate',function($ionicScrollDelegate) {
    return {
        scope:false,
        restrict: 'A',
        replace: false,
        link: function(scope, element, attrs) {

            var el = angular.element(element);

            var ion = angular.element(element).parent().find('ion-content').css({
                top:'0'
            });

            var delegateHandle = attrs.translucentBar;
            var translucentColorOpacity = attrs.translucentColorOpacity;
            var translucentColor  = attrs.translucentColor;
            var translucentScrollMaxtop = attrs.translucentScrollMaxtop;
            var translucentColorTotal   = attrs.translucentColorTotal;

            if(!delegateHandle) {
                //throw new('please dingfine the ion-content of delegate-handle');
            }
            if(!translucentColorOpacity) {
                //throw new('you must set translucentColorOpacity directive of the value');
            }
            if(!translucentColor) {
                //throw new('you must set translucentColor directive of the value');
            }

            if(!translucentScrollMaxtop) {
                translucentScrollMaxtop = 88;
            }

            if(!translucentColorTotal) {
                translucentColorTotal = 90;
            }

            var rgb = translucentColor.substring(4,translucentColor.length-1);

            var initCss = {
                'background': "rgba("+rgb+","+translucentColorOpacity+")"
            };

            el.css(initCss);

            var scroollTop = null;
            var distance = null;
            var opacity  = null;
            var translucentCss = null;

            scope.$$childHead.$onScroll = function() {
                distance   = $ionicScrollDelegate.$getByHandle(delegateHandle).getScrollPosition();
                scroollTop = distance.top;

                if(scroollTop <= translucentScrollMaxtop) {
                    opacity = scroollTop / translucentColorTotal;
                    translucentCss = {
                        'background': "rgba("+rgb+","+opacity+")"
                    };

                    el.css(translucentCss);
                }
            }
        }
    };
}])