スクロール時にイオニック非表示サブヘッダー

Question

スクロールでサブヘッダーを非表示にしています。

.directive('scrollWatch', function($rootScope) { 
    return function(scope, elem, attr) { 
    var start = 0; 
    var threshold = 150; 

    elem.bind('scroll', function(e) { 

     if(e.target.scrollTop - start > threshold) { 
     $rootScope.slideHeader = true; 
     } else { 
     $rootScope.slideHeader = false; 
     } 
     if ($rootScope.slideHeaderPrevious >= e.target.scrollTop - start) { 
     $rootScope.slideHeader = false; 
     } 
     $rootScope.slideHeaderPrevious = e.target.scrollTop - start; 
     $rootScope.$apply(); 
    }); 
    }; 

}) 

と私のpage.htmlで：私の指示で、私は次のコードを持っている

<ion-view title="Job Post " id="page8" hide-nav-bar="true" class="bar-positive " hide-back-button="false" ng-class="{'bar-subheader-slide-away': slideHeader}" > 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Ionic Sub Header Show/Hide on Scroll</h1> 
     </ion-header-bar> 
     <ion-header-bar class="bar-subheader bar-dark"> 
     <h1 class="title">Hide this sub header on scroll down and display on scroll up!</h1> 
     </ion-header-bar> 


    <ion-content padding="false" class="has-footer" id="jobdetailsWrapper" scroll-watch> 



    <a class="item" href="#"> 
    List Item 
    </a> 
    <a class="item" href="#"> 
    List Item 
    </a> 
    <a class="item" href="#"> 
    List Item 
    </a> 
    <a class="item" href="#"> 
    List Item 
    </a> 
    <a class="item" href="#"> 
    List Item 
    </a> 
    <a class="item" href="#"> 
    List Item 
    </a> 

    </ion-content> 


</ion-view> 

をしかし、何も起こりません。サブヘッダーはそこにとどまり、私は何の誤りもありません。これをどうすれば解決できますか？

Answer 1

これらの例またはコードペインは、イオン性1.0ベータに作用する。あなたがイオンv1.3.2 "フランス"で働いているならば。追加NG-クラスは

<ion-nav-bar ng-class="{'hide-header': slideHeader}">...</ion-nav-bar> 

イオンナビゲーションバーに

<ion-content on-scroll="getScrollPosition()" delegate-handle="mainScroll">...</ion-content> 

（機能）

デリゲートハンドル（名前）とオンスクロール：次の手順を実行しますにアクションを追加します。slideheader

$scope.posAnt = 0; 
$scope.getScrollPosition = function(){ 
    var pos = $ionicScrollDelegate.$getByHandle('mainScroll').getScrollPosition().top; 
    if(pos < $scope.posAnt){ 
    $scope.slideHeader = false; 
    }else{ 
    $scope.slideHeader = true; 
    } 
    $scope.posAnt = pos; 
    $scope.$apply(); 
} 

ここで、クラスhide-headerにcssを追加するだけです。

例

.hide-header .bar-header{ 
    display: none; 
} 

ヒント：あなたが好きなプラットフォームシステム（IOS、アンドロイド）を使用するRemenber。

.platform-android .hide-header .bar-header 
.platform-ios .hide-header .bar-header 

関数getScrollPositionは、Android 6.0のYoutubeアプリと同じように機能します。だから、あなたがスクロールダウンバーヘッダーの隠れ、およびスクロールアップバーヘッダーの表示時。

必要に応じてgetScrollPsotionを変更します。

幸運。