Streaming live at 10am (PST)

Sticky Section Till Scrolled Past

Hi Everyone,

I’ve been trying to figure out how to replicate something like this (please check out the GIF). I can’t seem to figure out how to keep a sticky section present only for only a brief amount of time.

Thank you in advance for the help!

Amman

Hi Amman,

can you share a link of your website you have in mind. Than its easier for us to help you.

Thanks,
Matthias

Absolutely, it is: https://www.wokine.com/en/

This is how you share your read only link:

Awesome site btw!

1 Like

Thats not easy. But you can do this with interactions. (While page is scrolling)
This example is different, but you can adapt parts of it:

Hi Matthias,

At the moment I seem to have 90% of it down. I just can’t seem to figure out how to keep it fixed in the viewport…

Can you share a read-only link?

https://preview.webflow.com/preview/durfe?utm_medium=preview_link&utm_source=designer&utm_content=durfe&preview=a5a1495550309146862513034672ce91&mode=preview

This is a very primitive model of the website.

Hi,

Thanks. I would not use overflow for this project. Otherwise you have to put your complete site in on Div and set it to overflow.

to get the the red box fixed

  • set your “overflow div” to “position” “fixed”

to get the white boarder

  • Make a “section” on top
  • set to “position” “fixed”
  • set “width” “100vw”
  • set “height” “100vh”
  • set “z-index” to “999”
  • put 4 white “div” in for every edge,
  • set height/Width
  • set all “divs” to “absolute”
  • algin them to the edges with the buttons above

Thanks for the help. I tried it from scratch, however the document will not scroll (I assume this happens because of the fixed positioning).

It’s alright though, I will set the animation trigger to when the page loads instead. Thank you for being patient with me and I really appreciated the help!

All the best,
Amman