transparent header doesnt change to colour when scrolling on home page

[jhoj]

i am using the origin theme, the issue im having is that when i scroll on the home page, the header stays transparent, but on every other page, the header is cream and when i scroll it stays the colour cream. 

how i want the page to be is that the only transparent header is on the home page, which it is, but then when scrolling it changes to a sticky header in the colour cream. the sticky header is currently on every page and on every page except the home page the header is how i want. the header is cream, and when scrolling the header sticks and stays the same colour. 

i need help to fix the header so it turns cream on the home page when scrolling. 

also when i press the menu from the home page, the header also stays transparent it doesnt turn cream, im not sure how to fix that. i have added some coding to my theme.liquid which made my header transparent, and another code to make my sticky header cream.

hopefully ive explained this right and if anyone could help that would be great!

[BrainStation23]

HI, @jhoj  can you share you'r store URL so that we can look at it?

[Anshul_arora · Accepted solution]

Hello @jhoj ,

I understand you are looking to change the background color on scroll from transparent to #dfd1c5

Please add this code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.scrolled-past-header * {
background: #dfd1c5 !important;
}

</style>

[Please feel free to change the background color as per your need.]

Output will be like this -> https://prnt.sc/NIchuqHCA4De , https://prnt.sc/bT9Hw5LbEsYy

I hope the code helps you.

Thank you.

[jhoj]

it worked! thank you so much

[jhoj]

im  having one last issue, when on the theme editor, if i press the menu on desktop mode, the header stays transparent rather than changing to the dfd1c5 colour

[jhoj]

even on the mobile version