Top of page interactions

Hi guys I am wondering if anyone can help me with some interactions.

When at the top of my webpage I have my navbar background set to transparent.
When scrolled down the navbar background then turns white.

I want to know if there is a way I can get my navbar background to then turn back to transparent when the user navigates back to the very top of the page (only when they reach the top).

Please see the example screenshots:


1 Like

Hi @Edward_Gray

These two approaches should help - first is with Interactions 2.0 and the second with 1.0 (aka Legacy interactions)

Let us know if you hit any problems :slightly_smiling_face:

Thanks StuM I will let you know how I get on.

This worked great thanks! However I have one more question.

Is it possible to have my nav appear 100px before the bottom of my hero section, so that the nav in sight just before we reach section 2?

Please see the attached:35

Dont worry got it sorted! Cheers!

@Edward_Gray - Did you figure out how to get the Nav background to turn back to transparent only when the reach the top of the page? I’m trying to figure this out as well!


Hi Guys,

I was looking for this answer and just figured it out.

Remove your Page Scrolled page trigger animation.

Set a While Page is Scrolling page trigger.

At the 0% marker set your transparent background nav bar.

At 1% set your nav bar background to white.


Damn thank you so much!!!

1 Like

Thank you, @jeffjeanbap! Was scratching my head about how to accomplish this with Page Scrolled animations until I came across your post.

1 Like

Thank you! This did the trick.

1 Like

Had did you resolve this @Edward_Gray without resorting to the scrolling in view interaction?