上滚动角样式更改CSS [英] Changing css on scrolling Angular Style

问题描述

我想改变CSS元素，同时用户滚动角的方式。

I want to change CSS elements while a user scrolls the angular way.

这里的code工作JQuery的方式

here's the code working the JQuery way

$(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');
    }

我想这样做有以下code中的角方式，但$ scope.scroll似乎无法正常皮卡滚动数据。

I tried doing the Angular way with the following code, but the $scope.scroll seemed to be unable to properly pickup the scroll data.

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

Muchos格拉西亚斯 - 吾友！

Muchos gracias amigos!

推荐答案

记住，在棱角分明，DOM访问应该从指令中发生。这里有一个简单的指令，将根据变量中的 scrollTop的窗口。

Remember, in Angular, DOM access should happen from within directives. Here's a simple directive that sets a variable based on the scrollTop of the window.

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/

It's not apparent to me exactly what end result you're looking for, so here's a simple demo app that sets the height of an element to 1px if the window is scrolled down more than 50 pixels: http://jsfiddle.net/BinaryMuse/Z4VqP/

这篇关于上滚动角样式更改CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！