I’ve got an interesting issue I cant seem to wrap my head around but I’m sure one of you can figure it out. I have a fixed nav that animates in and out on page scroll and works as expected. My issue is that upon the page loading for the first time I don’t want the nav to have a background, but when the page is scrolled back up at any point I do want the nav to have a background because of page contrast issues.
Things I’ve Tried:
-
I tried setting the initial state in the scroll up and down animation to be out of viewport but the “scrolled Up” animation plays at the beginning because technically the page is scrolled up.
-
I also tried setting up an “on page load” animation that moves the background out of view but the scrolled up animation seems to trump the load animation.
-
I tried setting up a “when scrolled into view” animation but get the same result
If I could use the Navbar’s background color to achieve this I would rather do that then using another div for the background how I have it set up currently
Any ideas?
Here is my public share link: Link
(how to access public share link)