Navbar scroll into view with background color changing

Design help Animations & Interactions
1

Hi,

I made a navbar with interaction.
When scrolling down the navbar will disappear, and when scrolling up it shows again.

45
453320×1282 789 KB

However, when it scrolling up again, I’d like to make the navbar background color from transparent to black. I tried to add a div for background color, but it doesn’t really work.

07
073324×1792 733 KB

00

Can anyone kindly help me with this problem?

The ideal Navbar is like the below website.
But when scrolling up the background color shows up.

Here is my public share link:
https://preview.webflow.com/preview/bodyboss-28a4c076777f84bdc52d45bca2a4d5?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-28a4c076777f84bdc52d45bca2a4d5&preview=20f9ace36e0e3874e2a212e5def145fe&pageId=5d64d82a9883e8a95c33c982&mode=preview

2

Hi,

You can fix this by rearranging the positioning of the nav background colour div that you’ve added.

If you drag the nav bg color block inside the navbar itself like so:

43

Then set the positioning settings to the following:

38
38466×728 26.3 KB

3

Hi, Thanks for your reply!!
The interaction works well on the top page! :slight_smile:
But it sometimes doesn’t work…

https://preview.webflow.com/preview/bodyboss-28a4c076777f84bdc52d45bca2a4d5?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-28a4c076777f84bdc52d45bca2a4d5&preview=20f9ace36e0e3874e2a212e5def145fe&mode=preview

I set my navbar as a symbol and put it to different pages.
However, in other pages, the interaction doesn’t work.
for example,
https://preview.webflow.com/preview/bodyboss-28a4c076777f84bdc52d45bca2a4d5?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-28a4c076777f84bdc52d45bca2a4d5&preview=20f9ace36e0e3874e2a212e5def145fe&pageId=5d5f71d1c701dec5f829150f&mode=preview

https://preview.webflow.com/preview/bodyboss-28a4c076777f84bdc52d45bca2a4d5?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-28a4c076777f84bdc52d45bca2a4d5&preview=20f9ace36e0e3874e2a212e5def145fe&pageId=5d5f71d1c701decc1729150b&mode=preview

Could you kindly give me some advice to solve this problem?

Best regards,