向上滚动和向下滚动时导航按钮的颜色变化

我在用净空.js http://wicky.nillia.ms/headroom.js/向下滚动时隐藏标题，向上滚动时使标题部分再次可见。标题部分包含我的徽标和导航按钮。

在页面顶部，我需要导航按钮的颜色较深，因为我的背景颜色较浅，向下滚动时，我需要导航按钮的颜色较浅，因为标题背景颜色较深。

我在 CSS 中创建了颜色类来更改按钮颜色。

CSS:

.topColor {color: red;}

.scrollColor {color: white;}

我在这个项目中使用 angularjs，所以我使用 headroom.js 角度模块和下面的选项。

角度：

<headroom id="header" tolerance="5" offset="205" classes='{"initial":"animated","pinned":"swingInX","unpinned":"swingOutX","top":"headroom--top","notTop":"headroom--not-top"}' > 

为了完成更改导航按钮的任务，我尝试了两种不同的方法。

1.) 创建了一个指令来检查 headroom 是否 hasClas('headroom--not-top') 以及是否将类 ('.scrollColor') 添加到我的导航按钮 ('#navColor')，否则添加类 ('.topColor') '）。

.directive('headroom', function(){
    return{
        restrict:'E',

        link: function(scope, element, attrs){

            if($(element).hasClass('headroom--not-top'))
            {
                $('#navColor').addClass('.scrollColor');
            }else{
               $('#navColor').addClass('.topColor');
            }
        }
    }
});

2.）然后我尝试了这种方法......

.directive('headroom', function(){
        return{
            restrict:'E',

            link: function(scope, element, attrs){

                if($(element).hasClass('headroom--not-top'))
                {
                    $scope.myNavColor = "scrollColor";
                }else{
                    $scope.myNavColor = "topColor";
                }
            }
        }
    }); 

html 中的导航

<li><a id="navColor" ng-class="{current: isCurrentPath('/')}"  active class = "{{myNavColor}}"  ng-href="#/">Home</a></li>

这两种尝试都不适合我，但是第一次尝试确实将按钮更改为白色，但是当我向下滚动时它没有改变。我认为问题是 $(element) 没有被识别，或者我只是完全错误地处理这个任务？

我找到了使用 CSS 解决这个“问题”的方法！ headroom.js 使用两个类来检测标题何时位于页面顶部以及何时滚动（不是顶部），因此我提供了以下 CSS。

header.headroom--not-top ul li a{
    color: red;
}

header.headroom--top ul li a{
    color: white;
}