Streaming live at 10am (PST)

Fixed navbar colour change on scroll down


I have a fixed navbar on my site (share link below) which has a transparent background so that the cover image of London comes through. But I’ve realised once I scroll down the page, it doesn’t look so good because the white nav links will disappear on the white background further down the page.

So my question, is it possible to change the background colour of the nav bar from transparent to a colour of my choosing, once a visitor starts scrolling?

Thanks a lot


share link here


Yes, in many ways.

One way could be to lay a colored div on the bottom/background of your navbar (add it on position absolute, 100% widht and height, and give it a lower z-index than the actual navbar content container).

Then give this div opacity zero.

Then on the first section who should make it appear when it goes in or out of screen, add an onscroll interaction targetting this div and pass it opacity 100%.

Try to put that in action and come back with a public link if you have issues to make it work.

Hi Vincent

Thanks very much for your help.

I’ve set up a div called InteractionDiv in the navbar with opacity set to 0% in effects. I’ve created the transition but obviously not got it set up correctly as the div appears on the left from the outset, rather than onscroll and all the way along. I just want it to be the height of the current navbar (approx 100px high).

If you can advise me further I’d be most grateful.



Ok, you need to create an interaction on ANOTHER element, to trigger the event on your interactiondiv.

Like this:

So when this elements gets into view or out of view, the interaction triggers and render the div opaque. Look my screencast. I pass the bg to red to see it better.

See? When it’s set up you can try it on many elements and decide how it behaves the best.

1 Like

Hi @vincent

Thanks so much to going to so much trouble, I’ve got it working!

Any idea how I tweak it so the InteractionDiv appears sooner (with less scrolling down before it comes into view)? At the moment it takes a second or two of scrolling before you see it. I’d really like for it to appear almost as soon as the visitor scrolls down.

I have had a play using the headline as the element I apply the interaction to, but it didn’t seem to make any difference.

Thanks again, I really appreciate your help.


You can create a dummy object (a div that is invisible and that you place wherever you want) for the only sake of triggering your interaction at the moment you want. For example a 0px height section right after the navbar, or a 10x10 px div colored in neon green (to locate it easily) (that you pass to 0px dimensions onload) that you position absolute from the top.

Thanks @vincent

That’s done the trick.

Thanks again for all your help.


1 Like

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