Streaming live at 10am (PST)

Navbar scroll into view with background color changing

Hi,

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

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.


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

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:

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,