一尘不染

绑定类切换到窗口滚动事件

angularjs

当用户将浏览器窗口滚动到某个点以下时,我正在切换#page div的类。

到目前为止,我所做的工作正常:

http://jsfiddle.net/eTTZj/29/

<div ng-app="myApp" scroll id="page">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 element.addClass('min');
                 console.log('Scrolled below header.');
             } else {
                 element.removeClass('min');
                 console.log('Header is in view.');
             }
        });
    };
});

(当他们将窗口滚动到标题(100像素)以下时,将切换该类)

虽然,如果我错了,请纠正我,但我认为这不是使用Angular进行此操作的正确方法。

相反,我认为执行此操作的最佳方法是使用ng-class并将布尔值存储在范围中。像这样:

<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
        });
    };
});

尽管这不是动态的,但是如果我在滚动回调中更改scope.boolChangeClass的值,则ng-class不会更新。

所以我的问题是:当用户滚动到特定点以下时,如何最好地使用AngularJS切换#page类?


阅读 183

收藏
2020-07-04

共1个答案

一尘不染

为什么你们都建议进行大范围操作?我不明白为什么这不是“角度”解决方案:

.directive('changeClassOnScroll', function ($window) {
  return {
    restrict: 'A',
    scope: {
        offset: "@",
        scrollClass: "@"
    },
    link: function(scope, element) {
        angular.element($window).bind("scroll", function() {
            if (this.pageYOffset >= parseInt(scope.offset)) {
                element.addClass(scope.scrollClass);
            } else {
                element.removeClass(scope.scrollClass);
            }
        });
    }
  };
})

因此,您可以像这样使用它:

<navbar change-class-on-scroll offset="500" scroll-class="you-have-scrolled-down"></navbar>

要么

<div change-class-on-scroll offset="500" scroll-class="you-have-scrolled-down"></div>
2020-07-04