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?
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?