Я пытаюсь выполнить обнаружение прокрутки, которое обновит положение элемента при прокрутке.

Код 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
user1995781 7 Мар 2015 в 10:08

2 ответа

Вам нужно сообщить Angualar о ваших изменениях, чтобы он мог их применить:

w.bind('scroll', function () {
    adjustHeight();
    scope.$apply();
});
0
dfsq 7 Мар 2015 в 10:13

Поскольку обработчик события 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';
            }
        }
    };
}]);
0
mohamedrias 7 Мар 2015 в 10:18