Menu Background Color on Menu

Hi

I’m trying to change menu background color to Red, when I set to Transparent Header.
so I will get red box on the menu list.

My CSS is :
ul#avia-menu.menu.av-main-nav {
background-color: red;
}

But when page is scrolled down, the red color is still hanging in there.
I want to display red box only when on main page, but it change to default when page is scrolled down.

what should I do?

Thanks