Why is my sticky not working? Help!

I can’t seem to find why the [position:sticky] is not working :sob:
Webflow - Deependu Ajish


Here is my public share link: https://preview.webflow.com/preview/deependuajish?utm_medium=preview_link&utm_source=designer&utm_content=deependuajish&preview=9263f99d94870e0b6c3815ebbd11d0e5&pageId=5ee6f5f4b6555cf31b58e1d6&mode=preview

the image is too small to see what is supposed to be sticky…

Sry about that… thought it might give some reference. Try accessing the shared link if possible. If you’re on mobile,

Here’s a breakdown:
About + Contact (SECTION) - [position:relative]
—> Sticky Div (DIV) - [position:sticky]
------> Overflow Hidden (DIV) - [position:static]

------------> Rest of the children elements are [position:static]

I’m sorry, but I don’t understand what is supposed to be happening.

Ok my bad :sweat_smile:
So once I scroll down, the ABOUT section is supposed to stick and when I keep scrolling, the CONTACT section reveals. Right now, as I scroll down, it automatically animates, without the section sticking to the top. I don’t want the CONTACT section to reveal before the entire ABOUT section is visible. Hope it’s not confusing.

Here’s a reference for something similar. Instead of pressing the CONTACT section, it has to reveal itself once I scroll down.
ezgif.com-video-to-gif

In that case it’s not sticking to the right thing… it’ll stick to the nearest parent that is relative…

The parent section(About+Contact) to the STICKY DIV is positioned as relative.

But what’s stoping Scrollabe div from going up the page?

I’m not sure if I understand that correctly.

You need to make it stick to the to of the screen, not keep scrolling too…

Taking the dog for a walk… be back later, hopefully you’ll have figured it out!

1 Like

Haha… will give it a go :crossed_fingers: :sweat_smile:

1 Like

Sticky works in such a way that when a child is set to sticky it will stay at a certain position for the duration of it’s parent’s scrolling. Meaning that the parent’s height should be larger than the height of this sticky element and should not be determined by the height of the sticky element. In your case sticky is the div that includes all the content and its parent’s height = sticky element’s height. So where would the stickiness come from?

7 Likes

omg :man_facepalming:

That makes total sense. And I fixed the animation too. Thankyou!

2 Likes

thanks this helped me too

And guys one of the most important things is, if any of the parents is on “hidden overflow” no child will ever stick, keep that in mind. Finding that out took me waaay too long haha.