Sticky Section Till Scrolled Past

Design help General
1

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

2

Hi Amman,

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

Thanks,
Matthias

3

Absolutely, it is: Agence digitale & Startup Studio basée à Lille, depuis 2004.

4

This is how you share your read only link:

Awesome site btw!

1 Like
5

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:

6

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…

7

Can you share a read-only link?

8

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.

9

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
10

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

11

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