Change header background colour on event

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?

The background opacity that you set using code will never be greater than the opacity you set on the editor.
Therefore, if you want to have a full control over the opacity, you should scroll it to 100% on the editor, then you can make it transparent (or partially transparent) via code.

Sorted - thanks!!

@iaindowner you’re welcome :slight_smile: