Question

我想根据用户位置和滚动位置更改导航栏的背景。基本上，如果用户位于除根之外的任何页面上，它将被填充，如果它们在根上，如果它们滚动超过其窗口的整个高度（因为这是我的标题的高度），它将被填充。 / p>

我的角度代码似乎正在我的console.log输出正确。但是.fill类似乎没有得到应用！相反，只有在应用了.open类时才会应用（当单击菜单按钮时），然后在用户向上滚动时不会被删除！。

这是我的navbar指令的代码。

angular.module('lumbajackApp')
  .directive('navbar', function ($location, $window) {
    return {
     templateUrl: 'app/navbar/navbar.html',
     restrict: 'EA',
     link: function (scope, elem, attr) {
      var ngwindow = angular.element($window);
      var height = $window.innerHeight;
      var scrollPos = 0;

      ...omitted... 

      ngwindow.bind('resize', function(){
        height = $window.innerHeight;
      });
      scope.isFilled = false;

      if ($location.path() === '/') {
        ngwindow.bind('scroll', function(){
          scrollPos = this.pageYOffset;
          if (scrollPos > height){
            scope.isFilled = true;
            console.log(scope.isFilled);
          } else {
            scope.isFilled = false;
            console.log(scope.isFilled);
          }
        });
      } else {
        scope.isFilled = true;
      }
    }
  };
});

以下是html的片段：

<div class="top-nav" ng-class="{'fill':isFilled, 'open':!isCollapsed}">
  ...
</div>

最后，我的SCSS片段

/* Nav states */

.top-nav.fill {
  background: url(/assets/images/pattern2.png) repeat;
  background-size: 1000px;
}

.top-nav.open {
  background: rgba(0,0,0,0.6);
  height: 100%;
}

Answer 1

Angular digest循环不会在window.scroll上执行。

你需要通知角度为你运行摘要周期。

更新范围变量后，通知angular更新视图。在滚动处理程序的末尾写下面的行。

 scope.$apply();

ng-class不在滚动上更新

1 个答案: