Overlapping Scroll (how to do)?

Hey everyone,

I’m trying to replicate an overlapping scroll effect (similar to the one in the video I’ve attached) using CSS and JavaScript without any external libraries. Could you suggest the best way to implement this?
Here’s my CodePen for reference:
https://codepen.io/Ibrahim-AbuFarha/pen/LYwpdgz

Looking forward to your advice. Thanks!

Jochem•9/30/24, 10:24 AM

That looks like : https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example#sticky

MDN Web Docs

position - CSS: Cascading Style Sheets | MDN

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

JJochem That looks like `position: sticky;`: https://developer.mozilla.org/en-US/docs/We...

Rio200OP•9/30/24, 10:29 AM

no its not just a sticky i have tried it

Jochem•9/30/24, 10:30 AM

You'd have to wrap the first section in a container and set a scroll value on it

Jochem•9/30/24, 10:30 AM

oh, wait, I missed the purple bit the first time

Rio200OP•9/30/24, 10:31 AM

yeah check the video please i tried many solutions but nothing work

Rio200OP•9/30/24, 11:10 AM

any help!

Chris Bolson•9/30/24, 12:18 PM

As far as I can tell there are 4 things going on.

Side bar initially sticky but then fixed.
Main content stops before scrolling out of view completely
Purple section has sticky
Bottom content above both side bar and purple section

I forked your codepen and hacked together a solution.
I didn't change any of your code (and will admit that I didn't look too closely at it so as not to get distracted.

Using JS observationObserver it makes the sidebar "fixed" when it reaches it's sticky position (set at 10% as per your CSS). This could possibly be done with a scroll animation without the need for JS
I added sticky with a negative magic-numbered top value to get the "all-sections" container to stick before scrolling completely out of view.
I moved the purple element outside of the main container and gave it sticky (of course it now covers the sidebar - to resolve).
Wrapped the bottom elements in a container with a white background and a higher z-index.

This has really been a very quick hacky test to get it working. Unfortunately I don't have time to fine-tune this. Hopefully it might help you a little bit.

https://codepen.io/cbolson/pen/mdNeKzR

CodePenChris Bolson

Untitled

...

CChris Bolson As far as I can tell there are 4 things going on. 1. Side bar initially sticky b...

Rio200OP•9/30/24, 12:23 PM

thank you a lot Chris ,
i will check .

Rio200OP•10/1/24, 6:05 AM

Hi @Chris

Unfortunately, it didn't work. I tried multiple approaches, but nothing seems to work because the structure of the HTML doesn't align with the design requirements.

Could you please take a look and see if you can apply the scroll effect as needed?
I appreciate your effort!

Here’s the link: http://chess.com.dedi5536.your-server.de/ar/about-us

Chris Bolson•10/1/24, 7:41 AM

What have you tried?
As far as I can see in the link that you have provided there is no sticky, fixed or anything that even attempts to make this work.

Rio200OP•10/1/24, 8:05 AM

clear cashe so u can check

Chris Bolson•10/1/24, 8:21 AM

I have never loaded that website before so there is nothing in my cache

Rio200OP•10/1/24, 8:31 AM

I was working on the browser's source file, but then I pushed my styles to the server, which is why this happened.

Rio200OP•10/1/24, 8:34 AM

could u help me to get that scroll overlapping?

Rio200OP•10/1/24, 10:05 AM

Bro, sorry for bothering you, but is it doable or not? @Chris

Chris Bolson•10/1/24, 10:55 AM

It is probably doable as I demonstrated yesterday but I haven't yet seen anything that you have tried so don't know where the specific issue is.

Rio200OP•10/1/24, 11:52 AM

i tried to give all of blocks above of purple view and for purple view
and for the first section and for the achivement section but nothing work as i want

Rio200OP•10/1/24, 11:52 AM

thats why i deleted it

Rio200OP•10/1/24, 11:56 AM

http://chess.com.dedi5536.your-server.de/ar/about-us this is the link if u want to try and help me to get the desired scroll i appreciate you effort

Rio200OP•10/1/24, 11:56 AM

thank you bro

Chris Bolson•10/1/24, 4:23 PM

This is tricky, in a large part due to an excessive use of containers. You could probably achieve the same design with just 10% of the containers that you are currently using

You don't need to endlessly wrap content un div after div.
In HTML, as with most coding languages, less is defiantly more.

Chris Bolson•10/1/24, 4:24 PM

The purple section needs to be taken out of the the main container otherwise, as it is the last element, it won't have a chance to stick anywere.

Let me see if I can set up a fresh demo without all the content and endless containers.... (no promises)

Chris Bolson•10/1/24, 7:09 PM

I have made a demo for you.
This is not based on your code as, as I mentioned, it has far too many containers for my liking which makes it overly complicated.

This uses a parent grid, some column declarations and a couple of sticky elements. No JS. Hopefully you will be able to understand what I have done and adapt it to your site.
https://codepen.io/cbolson/pen/QWeypXG

CodePenChris Bolson

https://discord.com/channels/436251713830125568/1290255617369440256...

...