Change header colour when you scroll down

Store Design
, ,
1

URL: https://e8aiud65kvp3vbm4-17240367.shopifypreview.com

Password: testcode123

@media only screen and (min-width: 1025px) {
#main-navigation {
    background-color: transparent;
}
}
header-main, header {
    background-color: transparent !important;
}

header {
    position: fixed !important;
    width: 100%;
    border: none !important;
    top: 0 !important;
    z-index: 50 !important;
}

I have a sticky transparent header and what I am trying to do now is just change the header colour when a user has scrolled down (e.g black) how do I update my code to do that?

2

@emekayode

for this purpose you have to write some js code on scroll add a class once the class added on scroll update your CSS code according to that and once remove get back your code which you have already written.

Thanks