Change background color on scroll

[hostilearth]

Hi. I'm curious if it's possible to change a page's background color as the user scrolls, like done in this example.

In this example the class is the trigger for the JavaScript, and I'm not sure how I could do that in Shopify. Add a custom liquid section and put the <div class=""> there? That would tie up a lot of value section real estate, given we only have 25 per page.

Thank you.

[PageFly-Theodor]

Hi @hostilearth ,
This is Theodore from PageFly - Shopify Page Builder App.

Yes, you can change Shopify page background color on scroll using a custom Liquid section and Javascript.

Steps:

1. Create a Liquid Section:

   • Add a section with a class name (e.g., .scroll-background).

2. Add Javascript&colon;

   • Include Javascript that:
     • Detects scroll position.
     • Adjusts background color of the class element based on scroll (e.g., turns blue as you scroll down).

Best regards,
Theodore | PageFly

[hostilearth]

I'm not sure what you're suggesting. Put the JavaScript in the custom liquid section between <style> </style>? I tried that originally, and it didn't work.