Streaming live at 10am (PST)

Sticking an element to the middle of the screen - Page trigger

Hi there! :wave:t3:

I’m fairly new to the Webflow platform and having some trouble trying to achieve my desired outcome with the page triggers functionality.

In my project linked below I’ve created some page triggers under the “how we work” page. The initial triggers I’ve created appear to work great! However, after the heading text disappears and the grey div moves up, I want to make this div fixed to the middle of the screen. Once the div’s been fixed I plan for more content to appear in that div as the user continues to scroll.

If anyone can guide me on how I can achieve this I’d be very grateful :pray:t2:

Here is my site Read-Only: LINK

I see two possible solutions: Play with the sticky position or add a class to the div once it reaches the menu or top of the viewport.

The second method is not available in Webflow, but you could add custom JavaScript. That should make the job easier:

Hi Carsten,

Thanks for your input on this.

Do you know whether it’s possible to do this within the tools that Webflow offers? I take it that I’ll need to import code from the link tutorial which you’ve provided above?

Correct. There is a tool linked on that demonstration site that lets you copy & paste code. Hope that helps with your use case.