Navbar that disappears once you reach the footer

Design help General
1

Hello everyone, currently I’m trying the create an effect on a navbar. The navbar itself is sticky, but once it reaches the footer I want the navbar to disappear. Is there a way this can be achieved?
Have been trying for quite a while now, so far no luck. I hope someone knows a solution.

Thanks in advance!

2

Hi Timothy - welcome!!!

share your read only link :slight_smile:

3

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

Here you go :).

4

Make the nabber disapear on scroll up and let the Navbar back on scroll down. in other words - on scroll up use MOVE interaction to move nabber up so it hidden on the top of the screen, and vise versa when you scroll down use Move interaction to move the nabber back to its place.

check this site that uses this technics

5

I found this tutorial - hope it helps you

6

Create an animation that is triggered by the footer scrolling into view, and then you can mess with Opacity and Display settings of the navbar. Make sure to create the reverse, when someone is scrolling from the footer to the top.

7

Thanks for the quick response! I will try that out for sure :).

8

Sounds like the best solution so far. The thing is that I’m new to webflow and I don’t know how to make that work. For example: I can use the “while scrolling into view” trigger for the footer, but how am I going to make that effect my navbar?

1 Like
9

Let me direct to Webflow University. I could teach you the steps to get there, but reading through this article of Webflow University will definitely help you much more than just knowing how to achieve this specific animation.

I had the same behavior going for this old website I had: https://jeanthedesigner.webflow.io/