angularjs – 改变CSS滚动角样式

发布时间：2020-12-17 08:32:10 所属栏目：安全来源：网络整理

导读：我想在用户滚动角度方式时更改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).scrol

我想在用户滚动角度方式时更改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设置一个变量。

app.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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!