Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 改变CSS滚动角样式大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在用户滚动角度方式时更改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);
    });
});
@H_396_1@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/

大佬总结

以上是大佬教程为你收集整理的angularjs – 改变CSS滚动角样式全部内容,希望文章能够帮你解决angularjs – 改变CSS滚动角样式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。