Streaming live at 10am (PST)

Header with different states

Hi all,

I’m currently experimenting with Webflow. I’ve read through tutorials and what I can find on this forum, but what might be the best approach at replicating the header used on this site in Webflow?

https://www.vultr.com/

There’s interactions in webflow to sticky a navbar, make it appear/disappear on scroll, but how can this be combined with transparent backgrounds at top and having a background behind a header element?

Hi @LynxMukka

Can you please elaborate on this portion:

‘but how can this be combined with transparent backgrounds at top and having a background behind a header element?’

So in this example, the header of the page appears to be the same, but the background/animations change depending on the 3 conditions: scrolled to the top (invisible background), scrolled down (invisible) and scrolled up (white background).

Hope that helps.

@LynxMukka So this is a bit of a quick throw together but maybe it can give you an idea:
http://johns-sublime-site-ed019a.webflow.io/

I don’t think you can fire a trigger at a certain scroll position (eg. the top of the page). So what you could do is duplicate the top nav and keep that transparent, similar to this example: http://mateo-su.webflow.io/

Hope that helps

Thanks, this helps.

I think the example from mateo-su works good enough. What do you think is the best way to achieve preventing the sticky nav from appearing until a certain point on the page?

From the mateo example, it looks like there might be a trigger when the header goes out of view, for the sticky nav to appear?