Sticky/Static Transition

[Spencer_Knisely]

Hi everybody,

Just trying to learn how to do something that MUST be easy to do, but I’m overlooking something simple and I can’t figure it out. I think this is a useful bit of knowledge for several projects if I can acquire it.

I’m trying to emulate the behavior of the overlay div in this site: https://brooklynpointnyc.com

I see how it seems to be sticky to the bottom of the viewport as the hero panel scrolls, and then it reaches the bottom of that div and becomes…I guess…static? I don’t know.

Anybody have ideas?

Here’s my super quick mockup project so I can learn this: https://preview.webflow.com/preview/the-albion?utm_medium=preview_link&utm_source=designer&utm_content=the-albion&preview=8e772aa9454938740b20e55a2965b535&workflow=preview

[Spencer_Knisely]

Maybe this can only be accomplished with Javascript watching the scroll event and adding a class?

[PixelGeek (Nelson)]

Hi @Spencer_Knisely Here is how to do this: Screen Recording 2021-10-05...

hope this helps

[Spencer_Knisely]

Hey Nelson,

You’re a beast. I was trying to find a tutorial from you on this somewhere but couldn’t come up with the right search terms to find a video of yours with this included.

So helpful, and I think this is just applicable in so many places. 5 Stars.

[PixelGeek (Nelson)]

glad I could help!