How to nest sticky position on top of a sticky position inside a fake horizontal scroll?


Hi any idea
how can nest sticky section inside an sticky section? Or is it at all possible?


Here is my site Read-Only: LINK
([how to share your site Read-Only link]2)

Each sticky item must be with “scrollable” area (Overflow).

The main sticky scrollable area most of the times is the body. But for inner you need one more “extra” scrollable area.

So in general to you could solve ideas like this only by JavaScript (Try GSAP).

** Use overflow: scroll; - for the inner items (It’s help to see this idea in action).

1 Like

Thanks @Siton_Systems

I have hyperlinked my site but I cant modelled it in codepen
I only can add this as reference but it doesnt have the nested sticky section

For gsap issues it is better to post the problem here:

The best idea is to find a reference (Otherwise it is hard to understand what you want).

it’s not GASP related, I’m using this as a model
https://preview.webflow.com/preview/gsap-horizontal-scroll?preview=3c379c22c75a1399b4b82b1d5fd5bc97

Maybe this example?

Again try to find something similar on the web. If you invited the wheel maybe you should hire GSAP dev.

it’s using the same principle as mine and the previous that I have shared
it’s the base for the above illustrated fake horizontal scroll

1 Like