Angular Material Selection Affects Fixed Blocks

Question

I created a default side block static , but when scrolling to some point it becomes fixed . And in this block I use 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 (spyware 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(); }); }; }); 

Before the fixed side block, the material selection works fine, but as soon as you scroll the page and it becomes fixed , the selection will start acting strange.
GIF: http://recordit.co/i72EaaVxJf
Plunker: http://plnkr.co/edit/lfik78wR2FqPoSFSCNlz?p=preview

How can i fix this?

Answer 1

Add this to your controller instead of the scroll directive:

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