Navigation Bar Appears on Scroll then Disappears

Design help Animations & Interactions
1

Hi all!

Just need a little help with my Navigation bar.

I have a transparent nav bar at the top of the page and also have a second nav bar which isn’t transparent initially set at 0%. On scroll I have it appearing at a certain div. That works fine but I am having trouble when I scroll back to the top. I cant work out how to make the second nav to disappear at the same div it appeared on.

Any ideas? (hard to explain!)

2

post a public link to the project…
it’s much easier to fix the issue when you can see it.

4

The top nav bar is transparent onLoad…

  • and change changes when you scroll down the page.

You want the top menu bar to become transparent again

  • when you scroll back to the top of the form ?

Share / Post a read-only link to the project. Need to see inside the project.

5

Thats correct, id like it to disappear again when you got to the top of the page. How do I Share / Post a read-only link to the project?

6
7

Thanks for explaining!

here is the link.

https://preview.webflow.com/preview/cliftonville-copy?preview=04ca61e895bb747dc689134f9bd8f1c5

8

  1. second_nav:
    Change Interaction onInit
    remove Display:None to Display:Block

  2. top-header->menu-below-header:
    remove interaction (banner)

  3. top-header->menu-below-header->bistro-menu->H2 (Dining):
    remove interaction (nav disappear)

  4. top-background:

onScroll intoView

  • add interaction - affect second-nav Opacity 0%

onScroll outofView

  • add interaction - affect second-nav Opacity 100%

onHover Over

  • add interaction - affect second-nav Opacity 0%

5). on Body Hover Over

video shows on top-header - change to on Body

that way… no matter what section is displayed… the menu bar will appear when the user moves the mouse

onHover Over (BODY)

  • add interaction - affect second-nav Opacity 100%

See Video:

http://quick.as/14J5Cakbv

9

Awesome. you are a life saver, Thank you

10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.