스크롤 시 CSS 변경 각도 스타일

스크롤 시 CSS 변경 각도 스타일

사용자가 angular way를 스크롤하는 동안 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);
    });
});

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/

언급URL : https://stackoverflow.com/questions/13549216/changing-css-on-scrolling-angular-style