As a newcomer to the Angular framework, my current objective is:
To dynamically change the background color of my navbar while scrolling on the homepage, and have it maintain a fixed background color when navigating to other pages.
To accomplish this goal, I have created a "scroll" directive with the following code:
app.directive("scroll", function ($window,$location) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset > 0) {
scope.backgroundCol = "black";
} else {
scope.backgroundCol = "transparent";
}
scope.$apply();
});
};
});
I have been contemplating on whether to include a logic in this directive that checks the location and applies a fixed background color to the navbar if it is not on the homepage. Are there any alternative approaches that would be more efficient and organized?