Streaming live at 10am (PST)

Hide navbar when reach top of the page


#1

Hello :slight_smile:

As you can see in this preview: http://visaopura.webflow.io/post/5-great-web-design-resources the nav bar shows when the user scrolls up.

But I want that the nav bar hides when the page reach the top.

Can someone please help me? Thanks

https://preview.webflow.com/preview/visaopura?utm_source=visaopura&preview=ff67962eb5df9bed24e61cb3b7bd4c2c


Here is my public share link: LINK
(how to access public share link)


#2

@Mauricio_C_G_Pereira Have you taken a look at this tutorial on webflow university? I just used it to reveal a navigation when a user got to a certain part of the page and it works perfectly!


#3

Thank you @sarahdarr.
Yes I saw. And it’s more or like what I want. The difference is that I want the nav bar to hide again when the page reach the top, and in that example the nav bar remains.


#4

What page is your interaction currently on so I can take a look in your preview?


#5

Thank you @sarahdarr; the page is “blog posts template”


#6

@Mauricio_C_G_Pereira Try using the “While page is scrolling” interaction instead of page scrolled interaction. That will help you set animations based on which way the user is scrolling at at what part of the screen they are on. You can set 0% to move the nav on the y axis -100px to hide it at the top.


#7

Thanks @sarahdarr.
Yes, it could be, but that also shows the nav bar when the user scrolls down, and I don’t want that.
basically I want the navbar to show only when the user scrolls up, and when the page reach the top, the navbar hides.
I even tried to move the navbar when the hero div appears, but that also isn’t a solution.
I’m stuck with no ideias :slight_smile: