css - navegacion - cambio de color de los botones de navegación cuando se desplaza hacia arriba y cuando se desplaza hacia abajo

menu que se desplaza html

Question

Estoy usando headroom.js para ocultar mi encabezado cuando me desplazo hacia abajo y hacer que mi sección de encabezado sea visible nuevamente cuando me desplazo hacia arriba. La sección del encabezado contiene mi logotipo y botones de navegación.

Mientras que en la parte superior de mi página necesito que mis botones de navegación sean de un color más oscuro porque el color de fondo es más claro, y cuando me desplazo hacia abajo necesito que los botones de navegación sean más claros porque el color de fondo del encabezado es más oscuro.

He creado clases de colores en CSS para cambiar los colores de los botones.

CSS:

.topColor {color: red;}

.scrollColor {color: white;}

Estoy usando angularjs para este proyecto, entonces estoy usando el módulo angular headroom.js y la opción a continuación.

angular:

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

En un intento por cumplir la tarea de cambiar mis botones de navegación, probé dos enfoques diferentes.

1.) Creé una directiva para verificar si headroom tiene Clas (''headroom - not-top'') y si agregaba class (''.scrollColor'') a mis botones de navegación (''#navColor'') de lo contrario agregara clase (''.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.) Luego probé este enfoque ...

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

            link: function(scope, element, attrs){

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

nav en html

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

Ninguno de los dos intentos me funcionó, sin embargo, el primer intento cambió el botón de blanco, pero cuando lo desplacé hacia abajo no cambió. Creo que el problema es que $ (elemento) no está siendo reconocido, ¿o estoy llegando a esta tarea completamente equivocada?

Answer 1

¡Encontré una solución para este "problema" usando CSS! headroom.js utiliza dos clases para detectar cuándo el encabezado está en la parte superior de la página y cuándo se desplaza (no en la parte superior), así que proporcioné el siguiente CSS.

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

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

Answer 2

En mi caso (usando la clase de navegación de bootstrap):

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

Funciona, pero la situación ideal sería que el color fuera un color complementario del color de fondo cuando desciende el nabber. ¿No es así? Tal vez en jQuery ...