Sticky Position not working after codegen with next.js (in just react.js it does)

Issues
1

Hi,

I host my project on netlify (here) and just generated the code with codegen for next.js. Before I was working just with codegen and react.

In the react project and on plasmic studio, sticky positioning is working but in the next.js project it is not.

This issue came already up in the forum before but with no response. Is there something custom to next.js projects that makes sticky positions stop working?

Best,
Vinzenz

2

The issue is that you have body, html { overflow-x: hidden } on the page, but since html is the scrolling element, and sticky will stick to the latest containing box (body), it doesn’t work. You can set overflow-x: hidden only on html instead of both html and body.

3

Hi @chungwu thanks for your response.That is right, I just changed the value in the styles/globals.css in next.js and it worked.

I am not a next.js developer but maybe you should change that to be the defualt value when npx create-plasmic-app@latest and choosing next.js since it is strange when the plasmic preview works and the next.js code does not after generating.

Best,
Vinzenz