5
デフォルトでstatic
のサイドブロックを作成しましたが、あるポイントまでスクロールするとfixed
になります。そして、このブロックでは、角度材料選択を使用します。固定ブロック上で角張った材質選択が奇妙に作用する
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
になると、selectが変な動作を開始します。
GIF:http://recordit.co/i72EaaVxJf
Plunker:http://plnkr.co/edit/lfik78wR2FqPoSFSCNlz?p=preview
私はそれを解決することができますか?
はあなたが変なふうに動作するものを、もう少し明確にしていただけますか? –
「奇妙な行動」を定義してください – peterpeterson
*「奇妙な行動」*は適切な問題の説明ではありません。デモは私のためにうまくいった。複数のブラウザで同じ問題が発生していますか? – charlietfl