29

ユーザーが角度のある方法でスクロールしている間に 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);
    });
});
4

1 に答える 1

66

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 /

于 2012-11-25T08:38:46.287 に答える