gpt4 book ai didi

javascript - Angular Material select 在固定 block 上的行为很奇怪

转载 作者:太空狗 更新时间:2023-10-29 16:39:49 24 4
gpt4 key购买 nike

我创建了一个默认为 static 的侧 block ,但当您滚动到某个点时会变为 fixed。在这个 block 中,我使用 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(滚动 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();
});
};
});

在 side-block fixed 之前,Material select 工作正常,但是一旦你滚动并且它变为 fixed,select 开始表现得很奇怪。
动图:http://recordit.co/i72EaaVxJf
柱塞:http://plnkr.co/edit/lfik78wR2FqPoSFSCNlz?p=preview

我该如何解决?

最佳答案

将此添加到您的 Controller 而不是 scroll 指令:

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

关于javascript - Angular Material select 在固定 block 上的行为很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35340033/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com