我想在用户滚动角度方式时更改CSS元素。
这里的代码工作的JQuery方式
$(window).scroll(function() {
if ($(window).scrollTop() > 20 && $(window).scrollTop() < 600) {
$('header,h1,a,div,span,ul,li,nav').css('height','-=10px');
} else if ($(window).scrollTop() < 80) {
$('header,'100px');
}
我尝试用Angular的方式与以下代码，但$ scope.scroll似乎无法正确地接收滚动数据。
forestboneApp.controller('MainCtrl',function($scope,$document) {
$scope.scroll = $($document).scroll();
$scope.$watch('scroll',function (newValue) {
console.log(newValue);
});
});
Muchos gracias amigos！
记住，在Angular中，DOM访问应该在指令内发生。这里有一个简单的指令，根据窗口的scrollTop设置一个变量。
原文链接：https://www.f2er.com/angularjs/145440.htmlapp.directive('scrollPosition',function($window) {
return {
scope: {
scroll: '=scrollPosition'
},link: function(scope,element,attrs) {
var windowEl = angular.element($window);
var handler = function() {
scope.scroll = windowEl.scrollTop();
}
windowEl.on('scroll',scope.$apply.bind(scope,handler));
handler();
}
};
});
我不清楚到底是什么最终结果你正在寻找，所以这里有一个简单的演示应用程序，将一个元素的高度设置为1px如果窗口向下滚动超过50像素：http://jsfiddle.net/BinaryMuse/Z4VqP/
