Goal: I have a column div and want an image on the left to remain sticky while text boxes on the right scroll beside it.
Provblem: The sticky behavior is working (sticking the image on the left column) in Plasmic Preview, but is not working when running locally on Vercel (it is just scrolling with the page).
I’ve tried putting the sticky image in a vertical stack and setting the stack minimum height to 100vh and 200vh, but neither have worked.
My project: Plasmic
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)