Change background color based on position

Design help Animations & Interactions
1

[Solved] Thanks to Mikeyevin.

Hello everyone,

I am trying to recreatie this nav-bar: https://www.etq-amsterdam.com/

The Nav-bar on the website linker above changed text and background color based on its position on the website.

  • At the top its transparent with either white or black text
  • When scrolled down on the header image, it has a white background
  • When scrolled out of the header image it completely dissapears
  • When scrolled up or hovered over it appears with a white background

How would one go about creating something like this?
Any help will be aprieciated.

Greetings,
Martijn

Read only link: https://preview.webflow.com/preview/mbfurniture?utm_medium=preview_link&utm_source=dashboard&utm_content=mbfurniture&preview=7d1e57f01b5c33c4d3f88b935843d0c3&mode=preview

2

The only situation that’s a bit tricky is changing color based on the slider image—however changing the opacity of the navigation background (or the entire navigation itself) is pretty easy to achieve with a “Scroll Into View” trigger. Just create an element trigger on your hero section and use the offset to have the animation trigger as your navigation element nears the bottom of the hero element.

There’s a tutorial that covers hiding the navigation when the user scrolls down (and showing it when the user scrolls up) that you can check out here that should get you on the right track.

I’d recommend starting to play around on a Webflow project but let me know if you end up getting stuck (along with a read-only link for the project) and I’d be happy to take a closer look :+1:

1 Like
3

Hello Mikey,

Thanks a lot for your reply, it got me a lot further. But as you predicted, I got stuck.
I managed to get the fade in and out working. Both on scroll and on hover. But now I just need to setup areas so it knows where or when its allowed to trigger certain animations.
For example. If you open the website and “accidentally” hover over and out of the navbar, it disappears. Which is very inconvenient.
In this case the fade in/out when hovering should be disabled. But when I scroll past the hero section, it should have the ability to fade in/out upon hovering.

How do I achieve this? or is it simply to complicated and do I need CSS?

Greetings,
Njitram

P.S.
I’ve added a read only link in the original post.

4

I’m not sure you’ll be able to get around this issue without some custom code as you can’t easily choose when certain triggers are active within a given page.

My suggestion is to remove the “Hover Out” interaction and allow the scrolling to hide the navigation instead.

1 Like