Streaming live at 10am (PST)

Did anyone find a way to change the logo/navbar colour on scroll?

#1

What I mean is this: some websites move from light background to dark background.

If that’s the case, the logo (or navbar) needs to change from dark to light and vice versa. Anyone found a solution?

Exactly like this: https://codepen.io/eighthday/pen/MKqBjX (see: bottom half)

1 Like
#2

Hey @chdaniel

Can you share your read-only link?

Piter :webflow_heart:

#3

create an “scroll into view” interaction to the section which is darker, and then you animate the change of the background color of the navbar. The opposite works as well.

Look at this draft for my portfolio: https://jeanthedesigner.webflow.io/

As you approach the footer (which takes the full width-height of the page) , the navbar goes 0% opacity. That’s easily achievable by using IX2 and the concept is the same

#4

@PiterDimitrov @Jeandcc thank you both for your comments! I managed to find what I’m looking for and it’s exactly this: https://codepen.io/eighthday/pen/MKqBjX (see: bottom half)

This kind of change that is perfectly lined. Does it make sense?

#5

Yes , I can see what you mean. However, I’m not sure if that’s possible to be done with Webflow only. You might have to use JavaScript , as the pen did, to achieve such results.

#6

@Jeandcc not really a coder myself, is that achievable with a HTML embed?

#7

Yes. All you need is to get a script tag in your page up and running. I’d recommend you placing it at the HEAD of your page. However, you’ll need to understand what that script is doing in order for you to configure it to work on your website.