изменение цвета кнопок навигации при прокрутке вверх и при прокрутке вниз

Question

Я использую 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> 

Ни попытка работал для меня, однако первая попытка была изменить белую кнопку , но когда я прокрутил вниз, это не изменилось. Я считаю, что проблема в том, что $ (элемент) не распознается, или я просто подхожу к этой задаче совершенно неправильно?

Answer 1

Я нашел решение для этой «проблемы» с помощью CSS! headroom.js использует два класса для обнаружения, когда заголовок находится наверху страницы и когда он прокручивается (а не вверху), поэтому я предоставил следующий CSS.

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

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

Answer 2

В моем случае (используя навигационный класс от начальной загрузки):

nav.headroom--not-top { color: red; background-color: lightgrey; opacity: .8 } 
nav.headroom--top { color: white } 

Он работает, но идеальная ситуация будет то, что цвет был дополнительный цветом от цвета фона, когда nabber опускаются. Нет? Возможно, в jQuery ...