sticky image not working

I fixed it. Here’s what I did, if helpful to anyone else with the same problem:

Problem: The sticky image wasn’t working on Vercel-hosted builds, but worked correctly in the Plasmic editor.

Root Cause: The issue was caused by setting overflow-x: hidden on both body and html. Since html is the scrolling element, and sticky sticks to the nearest containing box (which was body), the sticky behavior broke.

Solution: Set overflow-x: hidden only on html instead of both html and body .

Tip: Be careful when setting overflow properties on both html and body, especially when working with sticky elements. And always check for layout or global CSS conflicts when working with sticky elements across different environments.

Found the solution here: Sticky Position not working after codegen with next.js (in just react.js it does)

1 Like