当特定类处于活动状态时更改背景颜色

Question

I'm making a wordpress website, and the header menu has a background color when the page loads, but when I scroll it changes the header to sticky and changes the background color. The problem is that the dropdown menu doesn't change color and stays the same as the initial header.

What I wanted to do is when the header contains (stick) class to transform the background color of the dropdown menu.

Initial menu:

<header class=" scroll_header_top_area dark stick scrolled_not_transparent page_header">

when it transforms:

<header class="scroll_header_top_area dark stick scrolled_not_transparent page_header sticky sticky_animate">

So is it possible to add javascript or jquery to order the dropdown menu to change the background color when the header has (.sticky) class?

Thanks.

Edit: https://prnt.sc/o4xf4e https://prnt.sc/o4xf4e

These are screenshots for better comprehension of the problem, sorry for not expressing in the best way.

I had this css to change only the dropdown:

.drop_down .second .inner ul, .drop_down .second .inner ul li ul, .shopping_cart_dropdown, li.narrow .second .inner ul, .header_top .right #lang_sel ul ul, .drop_down .wide .second ul li.show_widget_area_in_popup .widget, .drop_down .wide.wide_background .second{
    background-color: #ffffff!important;
}

I added .scroll_header_top_area.sticky behind but nothing happened. Doing what you told me to do will only change the menu background and not the dropdown.

Answer 1

Just use CSS

.scroll_header_top_area.sticky {
  background-color: <whateveryouwant>;
}

Answer 2

Although css would be the preferred approach. This is the solution to your question using jquery.

$(".stick").css("background-color", "#000");

'#000 represents the color black in hex.

Answer 3

I overcomplicated, it was as you all said:

.drop_down .second .inner ul{
    background-color: rgba(0,0,0,0.3)!important;
}

header.sticky .drop_down .second .inner ul{
    background-color: #ffffff!important;
}

Thank you.