Change background color on scroll

hostilearth
Shopify Partner
38 0 6

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.

Replies 2 (2)

PageFly-Theodor
Shopify Partner
652 81 95

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

hostilearth
Shopify Partner
38 0 6

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.