Change background color on scroll

Technical Q&A
,
1

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

there? That would tie up a lot of value section real estate, given we only have 25 per page.

Thank you.

2

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:

    • 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

3

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