Change header background on scroll

[mwoodard]

I have seen some posts on this before but I my situation is a little different so here is what I am trying to do…

I am using RevSlider on the homepage to show a video background. I built a header for the home page that has a transparent background. However, when you scroll down the page past the video, you can see the header over the rest of the site because it’s transparent.

I would like to have the background of the header change to a solid color with opacity. I’ve seen articles on how to accomplish this but I have a caveat. …and that is… I have built a second header that I use on all of the other pages that are not the home page.

Is there a way to use js and css to change only the header on the home page on scroll and leave the headers on the other pages alone? Any help on this would be greatly appreciated.

Thanks!

[Prasant]

Hello @mwoodard,

Thanks for asking.

You can take a look at following thread and use the solution provided to change the background color only on home page.

Change header colour on scroll

Please note that it will require some custom development work and providing support for the same falls outside the scope of support we can offer.

Thanks.