Utilizing headroom.js allows me to cleverly hide my header while scrolling down and reveal it again when scrolling up. In the header section, I have placed my logo and navigation buttons.
When I am at the top of the page, I prefer my navigation buttons to be a darker color to contrast with the lighter background color. Conversely, as I scroll down, I want the button colors to change to a lighter shade to complement the darker header background color.
To achieve this effect, I have defined color classes in my CSS file:
.topColor {color: red;}
.scrollColor {color: white;}
Since I am working on this project using angularjs, I made use of the headroom.js angular module along with the specified options below:
angular:
<headroom id="header" tolerance="5" offset="205" classes='{"initial":"animated","pinned":"swingInX","unpinned":"swingOutX","top":"headroom--top","notTop":"headroom--not-top"}' >
In my attempt to dynamically change the color of my navigation buttons, I experimented with two different approaches:
1.) Initially, I created a directive that checks if 'headroom--not-top' class is present and adds '.scrollColor' class to '#navColor'; otherwise, it adds '.topColor' class.
.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.) Another approach I tried involved setting a variable based on the presence of 'headroom--not-top' class:
.directive('headroom', function(){
return{
restrict:'E',
link: function(scope, element, attrs){
if($(element).hasClass('headroom--not-top'))
{
$scope.myNavColor = "scrollColor";
}else{
$scope.myNavColor = "topColor";
}
}
}
});
Lastly, I included the navigation setup in HTML:
<li><a id="navColor" ng-class="{current: isCurrentPath('/')}" active class = "{{myNavColor}}" ng-href="#/">Home</a></li>
Unfortunately, neither of these attempts yielded the desired result. While the first approach successfully changed the button color to white initially, it did not update as I scrolled down. I suspect the issue lies in the recognition of $(element) or potentially an incorrect approach altogether.