在滚动角度样式时更改CSS

一尘不染

在滚动角度样式时更改CSS

angularjs

我想在用户滚动角度方式时更改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, h1, a, div, span, ul, li, nav').css('height','100px');
    }

我尝试使用以下代码执行Angular方式，但是$ scope.scroll似乎无法正确获取滚动数据。

forestboneApp.controller('MainCtrl', function($scope, $document) {
    $scope.scroll = $($document).scroll();
    $scope.$watch('scroll', function (newValue) {
        console.log(newValue);
    });
});

Muchos gracias好友！

阅读 198

2020-07-04

共1个答案

一尘不染

请记住，在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 /

2020-07-04