I have a transparent header which is set to “Fades Out”. I am trying to add an event (onViewportLeave) to set the background of the header to rgba(0,0,0,1) using the following so that the menu is readable further down the page where the text would otherwise clash:
export function header1_viewportLeave(event) {
$w(“#header1”).style.backgroundColor = “rgba(0,0,0,1.0)”;
}
When the header fades out and reappears after scrolling up, the background colour is still transparrent. Strangely, when I start with a 100% opaque background, it seems to resolve the issue so it would appear that the opacity is not being affected by my function.
Are there errors in my code or is there another way to achieve the desired outcome?