How do I change the blend mode of my header logo/text when scrolling down my website

Store Design
, ,

Topic summary

A user seeks help changing their header logo/text color when scrolling on a website with a transparent header. The current dark text becomes hidden against certain backgrounds as users scroll down.

Desired Solution:

  • Keep header transparent
  • Change text/logo color dynamically on scroll
  • Reference example provided: iamrossmason.com/patreon

Current Status:

  • A helper requested the store URL to provide custom code
  • The original poster shared their link privately (site not yet launched, releasing next week)
  • Unresolved - No solution has been posted publicly yet
  • Another user inquired whether a fix was found, indicating ongoing interest
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hey I currently have a transparent header with dark text, the issue is when scrolling down on my website the text get’s hidden. So to fix this issue I would like my header text/logo to change colour while scrolling down, I want to keep the header transparent.

Thank you

Example:

https://iamrossmason.com/patreon

2

Hi @Nickk98

Please share the link to your store so I can check and give you the code.

3

Hey my website hasn’t released yet. What’s your email so I can send you the link!

thanks

4

Hi my new website is releasing next week.

thanks for the feedback

5

sent!

6

Did you found a fit ?