Я пытаюсь выполнить обнаружение прокрутки, которое обновит положение элемента при прокрутке.
Код JS:
angular.directive('menu', ['$window', function($window){
return function (scope, element) {
var w = angular.element($window);
var top = element.offset().top;
w.bind('scroll', function () {
adjustHeight();
});
function adjustHeight(){
var newtop = top - w.scrollTop();
if(newtop>0){
scope.top = top - w.scrollTop();
}else{
scope.top = '0';
}
}
};
}]);
HTML:
<div ng-style="{'top':top}" menu></div>
Позиция обновляется только после остановки прокрутки. Как я могу получить обновление позиции в реальном времени?
2 ответа
Вам нужно сообщить Angualar о ваших изменениях, чтобы он мог их применить:
w.bind('scroll', function () {
adjustHeight();
scope.$apply();
});
Поскольку обработчик события AdjustHeight работает за пределами угловой области. Желательно использовать scope.$apply для этого.
Также лучше присвоить w.scrollTop();
переменной для повышения производительности.
angular.directive('menu', ['$window', function($window){
return function (scope, element) {
var w = angular.element($window);
var top = element.offset().top;
w.bind('scroll', function () {
scope.$apply(adjustHeight); // pass the adjustheight function to scope.$apply.
});
function adjustHeight(){
var scrolltop = w.scrollTop();
var newtop = top - scrolltop;
if(newtop>0){
scope.top = top - scrolltop;
}else{
scope.top = '0';
}
}
};
}]);
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.