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

我創建了一個側塊，默認情況下爲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

我怎樣才能解決這個問題？

來源

2016-02-11 Michael Vayvala

可以請你多一點清楚什麼古怪的行爲？ –

請定義「行爲奇怪」 – peterpeterson

*「行爲怪異」*不是一個適當的問題描述。演示對我很好。你是否在多個瀏覽器中看到相同的問題？ – charlietfl

添加到您的控制器，而不是scroll指令：

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

來源

2016-02-11 16:17:52

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

回答

相關問題