Varsayılan olarak static
olan bir yan blok oluşturdum, ancak bir noktaya kaydırdığınızda fixed
olur. Ve bu blokta Açısal-Malzeme seçimini kullanıyorum.Açısal Malzeme seçimi, sabit bloklar üzerinde garip davranır
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 (casus kaydırın):
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();
});
};
});
yan blok fixed
olduğunu önce, Malzeme seçme çalışıyor, ancak en kısa sürede ilerledikçe ve fixed
olduğunda, garip davranmaya başlar.
GIF: http://recordit.co/i72EaaVxJf
Plunker: http://plnkr.co/edit/lfik78wR2FqPoSFSCNlz?p=preview
Bunu nasıl
düzeltebilirim ?
gerçekten tuhaf kaçacak davranan neyi biraz daha net, lütfen? –
lütfen "garip davranın" tanımlayın – peterpeterson
* "garip davranır" * uygun bir problem açıklaması değildir. Demo benim için iyi çalıştı. Aynı sorunu birden fazla tarayıcıda mı görüyorsunuz? – charlietfl