角度材質選擇在固定塊上奇怪地起作用

Question

我創建了一個默認情況下是static的側塊，但在滾動到某個點時會變得fixed 。 在這個塊中我使用Angular-Material選擇。

CSS：

.pos-fixed {
    position:fixed;
    top: 60px;
    width:16.5%!important;
}

#sidebar-right {
    float:right;
    width:23%;
}
#sidebar-right #widget {
    width:100%;
}

HTML：

  <div id="sidebar-right">
    <div id="widget" ng-class="{'pos-fixed': imageHidden}" class="panel md-padding">
      <div>
        <md-input-container style="width:100%">
          <md-select ng-model="number1" placeholder="number 1">
            <md-option ng-repeat="number in ['one','two','three','four','five','six','seven']" value="{{number}}">{{number}}</md-option>
          </md-select>
        </md-input-container>
        <br />
        <md-input-container style="margin-top: 0px;width:100%">
          <md-select ng-disabled="!number1" ng-model="number2" placeholder="numbe 2">
            <md-option ng-repeat="number in ['one','two','three','four','five','six','seven']" value="{{number}}">{{number}}</md-option>
          </md-select>
        </md-input-container>
      </div>
    </div

JS（滾動間諜）：

app.directive('scroll', function($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind('scroll', function() {
      if (this.pageYOffset >= 320) {
        scope.imageHidden = true;
      } else {
        scope.imageHidden = false;
      }
      scope.$apply();
    });
  };
});

在fixed側邊塊之前，材質選擇工作正常，但是一旦滾動並且它變得fixed ，選擇開始奇怪地行動。
GIF： http ： //recordit.co/i72EaaVxJf
Plunker： http ：//plnkr.co/edit/lfik78wR2FqPoSFSCNlz？p = preview

我該如何解決？

Answer 1

將其添加到控制器而不是scroll指令：

var body = document.querySelector('body');
angular.element($window).bind('scroll', function() {
  if (body.style.position !== 'fixed') {
    $scope.isFixed = window.scrollY > 330;
    $scope.$applyAsync();
  }
});