I figured out the reverse version I mentioned above! Editor X has this template (https://create.editorx.com/website-template/view/html/2656) that uses sticky containers across grids. The key to getting the visual to look like the next part of the grid scrolls UP over the sticky section instead of under the sticky section is the LAYER PLACEMENT!! In this screenshot from this EditorX template, I renamed the first container in row one of the grid as ‘First Container’ and the container group in the last row of the same grid as ‘Last Container’. As you’ll see, the example has the First Container in a lower layer than the Last Container!!
This arranges the first container as “moved to back” and results in the non-sticky portions of the grid scrolling up over the first sticky container.
It was weird to me to have the last container at the top of my layers, so for my site, I actually put the first row container at the bottom of all the containers in my grid and renamed that first container as ‘Hero Container’ (I also changed the element ID as well).
I hope this helps for anyone who has been trying to figure this out. I tried multiple JS scroll options and still couldn’t get it. Ugh, can someone on the EditorX team update the Scroll support page (https://support.wix.com/en/article/editor-x-adding-scroll-effects-to-sections) with this additional info? It’s such a small thing that makes a HUGE difference with user experience.