LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
.bar-positive {
  z-index: 2;
}

.bar-subheader {
  z-index: 1;
  -webkit-transition: top 0.25s ease;
  transition: top 0.25s ease;
}

.has-subheader {
  top: 44px;
}
.has-subheader .scroll {
  padding-top: 44px;
}

body.bar-subheader-slide-away .bar-subheader {
  top: 0;
}
body.bar-subheader-slide-away .has-subheader {
  top: 44px;
}
JS
angular.module('starter', ['ionic'])

.controller('MyCtrl', function($scope, $ionicScrollDelegate, $rootScope) {
  $rootScope.slideHeader = false;
  $rootScope.slideHeaderPrevious = 0;
})

.directive('scrollWatch', function($rootScope) {
  return function(scope, elem, attr) {
    var start = 0;
    var threshold = 150;
    
    elem.bind('scroll', function(e) {
      if(e.detail.scrollTop - start > threshold) {
        $rootScope.slideHeader = true;
      } else {
        $rootScope.slideHeader = false;
      }
      if ($rootScope.slideHeaderPrevious >= e.detail.scrollTop - start) {
        $rootScope.slideHeader = false;
      }
      $rootScope.slideHeaderPrevious = e.detail.scrollTop - start;
      $rootScope.$apply();
    });
  };
});

Description

This example will hide the .bar-subheader when the user scrolls down the page once they have passed a threshold scroll distance of 150px.
Term
Mon, 11/27/2017 - 21:22

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv