Change backround color of nav bar on scroll

[tenzin (Tenzin Ray)]

with the nav bar fixed at the top of the page, and the intial back round of the nav set to transparent, how do I make it so the back-round color of the Nav bar changes from transperant some other color to make content more visible as i’m scrolling down the page? attached a link to the project below

---

Here is my public share link: https://preview.webflow.com/preview/dayglow-flow?utm_medium=preview_link&utm_source=designer&utm_content=dayglow-flow&preview=09b90aa9892a812327c1d4abadb78be4&mode=preview
(how to access public share link)

[Tom_Tucker (Thomas Gibbons)]

Currently you have it so it disappears as you scroll down. im not sure if that is intentional. how ever your colour change problem.

so… in the animation for page trigger page scrolled (Nav up/Nav down) get rid of the background colour change.

then add another page trigger for while page is scrolling. add an animation called nav BG colour change then in that animation at 0% have the BG colour what every you want it to be and set the opacity to zero.
duplicate that. then next, depending on how quick you want it to change i usually go for about 10% have the opacity up to 100%.

that will do the trick

if you need a preview then check this link

[tenzin (Tenzin Ray)]

ok i tried it and i dont see it changing the backround color. so do i create a backround color animation and seperate opacity animation like in this screen shot?

and opacity animation