I designed my homepage with a full-height div featuring a video. The header is fixed in position and has a transparent background with white text when positioned over the video. As I scroll down, I dynamically adjust the background to white with black text based on the window height.
Here is how my current header configuration looks:
<header id="masthead" class="site-header onVideo" role="banner" menuscript>
When I scroll, the "onVideo" class gets removed like so:
app.directive('menuscript', function ($window, $timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs){
var w = angular.element($window);
w.bind('scroll', function(){
if (w.scrollTop() < w.height() - $('#masthead').height()) {
$('#masthead').addClass("onVideo");
}else{
$('#masthead').removeClass("onVideo");
}
});
}
}
});
Although this setup works well for the homepage, I am facing challenges when clients navigate to other pages without videos. These pages should have a header with a white background and black text without the "onVideo" class. Additionally, scrolling should be disabled on these pages. Once users return to the homepage, the original functionality should resume.
I'm struggling to find a solution to handle these scenario transitions smoothly.
@TL;DR; I need assistance in removing a class from the header and unbinding the scroll event when users switch routes. A check should be performed to determine if the destination page is the homepage. If it is, the class should be added back and the scroll event reactivated. If not, the header should remain unchanged and scrolling disabled.