Angular Material wählen wirkt seltsam auf feste Blöcke

Question

Ich habe einen Seitenblock, der static ist standardmäßig erstellt, wird aber fixed, wenn Sie zu einem bestimmten Punkt scrollen. Und in diesem Block verwende ich Angular-Material select.

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 (scrollen spy):

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(); 
    }); 
    }; 
}); 

Bevor Seitenblock fixed ist, Werkstoff wählen Sie funktioniert gut, aber so bald Wenn Sie scrollen und es fixed wird, beginnt die Auswahl merkwürdig zu wirken.
GIF: http://recordit.co/i72EaaVxJf
Plunker: http://plnkr.co/edit/lfik78wR2FqPoSFSCNlz?p=preview

Wie kann ich es beheben?

Answer 1

Fügen Sie diese auf Ihrem Controller statt scroll Richtlinie:

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