绑定类切换到窗口滚动事件 [英] Bind class toggle to window scroll event

问题描述

当用户将浏览器窗口滚动到某个点以下时，我会切换 #page div 的类.

到目前为止我所做的一切都很好:

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

<标题></标题><节></节>
app = angular.module('myApp', []);app.directive("scroll", function ($window) {返回函数(范围，元素，属性){angular.element($window).bind("scroll", function() {如果(this.pageYOffset >= 100){element.addClass('min');console.log('滚动到标题下方.');} 别的 {element.removeClass('min');console.log('Header is in view.');}});};});

(当他们将窗口滚动到标题下方 100 像素时，类被切换)

虽然，如果我错了，请纠正我，我觉得这不是使用 Angular 执行此操作的正确方法.

相反，我认为最好的方法是使用 ng-class 并在作用域中存储一个布尔值.像这样:

<标题></标题><节></节>
app = angular.module('myApp', []);app.directive("scroll", function ($window) {返回函数(范围，元素，属性){angular.element($window).bind("scroll", function() {如果(this.pageYOffset >= 100){scope.boolChangeClass = true;console.log('滚动到标题下方.');} 别的 {scope.boolChangeClass = false;console.log('Header is in view.');}});};});

虽然这不是动态的，但如果我在滚动回调中更改 scope.boolChangeClass 的值，则 ng-class 不会更新.

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

解决方案

为什么你们都建议重作用域操作?我不明白为什么这不是角度"解决方案:

.directive('changeClassOnScroll', function ($window) {返回 {限制:'A'，范围: {抵消: "@"，滚动类:@"},链接:函数(范围，元素){angular.element($window).bind("scroll", function() {if (this.pageYOffset >= parseInt(scope.offset)) {element.addClass(scope.scrollClass);} 别的 {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>

When a user scrolls their browser window below a certain point, I am toggling the class of the #page div.

What I have done so far works fine:

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.');
             }
        });
    };
});

(when they scroll their window below the header, 100px, the class is toggled)

Although, correct me if I'm wrong, I feel that this is not the correct way to be doing this with Angular.

Instead, I presumed that the best method for doing this would be by using ng-class and storing a boolean value in the scope. Something like this:

<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.');
             }
        });
    };
});

Although this is not dynamic, if I change the value of scope.boolChangeClass in the scroll callback, then the ng-class is not updating.

So my question is: how is best to toggle the class of #page, using AngularJS, when the user scrolls below a certain point?

解决方案

Why do you all suggest heavy scope operations? I don't see why this is not an "angular" solution:

.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);
            }
        });
    }
  };
})

So you can use it like this:

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

or

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

这篇关于绑定类切换到窗口滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！