Angular Component

index.js

import angular from 'angular';

import {ScrollShadow} from './ScrollShadow';

const MODULE_NAME = 'sia.ui.common.directives';
export default MODULE_NAME;
angular.module(MODULE_NAME, [])
  .component('scrollShadow', ScrollShadow);

ScrollShadow.js

class ScrollShadowCtrl {

  static get $inject() {
    return ['$window', '$scope', '$elment'];
  }

  constructor($window, $scope, $element) {
    this.$window = $window;
    this.$element = $element;

    angular.element($window).on('scroll', this.boxShadowHandler);
    $scope.$on('$destroy', () => angular.element($window).off('scroll', this.boxShadowHandler));
  }

  boxShadowHandler() {
    if (this.$window.pageYOffset <= 44) {
      this.$element.css('box-shadown', 'none');
    }
    else {
      this.$element.css('box-shadow', '0px 10px 20px rgba(0, 0, 0, 0.4)');
    }
  }
}

export const ScrollShadow = {
  controller: ScrollShadowCtrl
};