Question

我正在玩粘性导航。问题是评估/应用fixed / static类对需要太长时间。

标记看起来像这样：

<div id="header" ng-controller="navController">
    <div id="logo">
        <a href="#"><img src="@Url.Content(@"~/assets/img/logotype.png")" alt="logo" /></a>
    </div>
    <ul ng-class="{fixed: useFixedPosition, static: !useFixedPosition}">
        <li><a href="#" class="home">Services</a></li>
        <li><a href="#">Equipment</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</div>

#header ul.fixed { position: fixed; top: 0; width: 100%; }
#header ul.static { position: static; }

控制器代码如下所示：

app.controller('navController', ['$scope', '$document', function($scope, $document) {
    $scope.useFixedPosition = false;
    $document.on('scroll', function() {
        $scope.useFixedPosition = $document.scrollTop() > 385;
    });
}]);

我正在使用angular-scroll插件（https://github.com/durated/angular-scroll）

我做错了什么？

修改

感谢@Plantface，有一个小提琴：http://jsfiddle.net/ud7k2po1/11。

Answer 1

简短回答：您应该在滚动事件结束时调用$scope.$apply()。

更长的答案：如果没有运行摘要周期，则不会运行负责与DOM双向绑定的观察者。由于.on()方法在jQuery或jQLite中，它们似乎不是$ scope意识到什么。

然而，对每个滚动事件运行脏检查都不是很有效，所以你最好在没有ng-class的情况下进行DOM操作，如下所示：

app.directive('floatingNav', 
  function($document) {
    return {
      link : function($scope, $element, $attr) {
        var breakpoint = ($attr.floatingNav ? parseInt($attr.floatingNav) : 200);
        var isFloating = false;
        $document.on('scroll', function(){
          if(!isFloating && $document.scrollTop() >= breakpoint) {
            $element.addClass('floating');
            isFloating = true;
          } else if(isFloating && $document.scrollTop() < breakpoint) {
            $element.removeClass('floating');
            isFloating = false;
          }
        });
      }        
    }
  });

将.fixed样式替换为.floating（删除.static，因为它是多余的）并使用它：

<ul floating-nav="385">…</ul>

课堂评估花费的时间太长。 AngularJS

1 个答案: