Когда пользователь прокручивает окно своего браузера ниже определенной точки, я перехожу к классу #page div.
То, что я сделал до сих пор, прекрасно работает:
<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.');
}
});
};
});
(когда они прокручивают свое окно под заголовком, 100px, класс переключается)
Хотя, поправьте меня, если я ошибаюсь, я считаю, что это не правильный способ сделать это с помощью Angular.
Вместо этого я предположил, что лучшим способом для этого было бы использование ng-класса и сохранение булевского значения в области. Что-то вроде этого:
<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-класс не обновляется.
Итак, мой вопрос: как лучше всего переключить класС#page, используя AngularJS, когда пользователь прокручивается ниже определенной точки?
