Nav bar background initial state not working per page scroll interaction

Design help Animations & Interactions
1

I’m using the page scroll up and down interaction for my nav to hide when scroll down and appear when scrolled up. This works like a charm for the nav bar itself but not so much for the background color. As you can see the transparent div block I added to the div background appears black without scroll. It should be transparent without scroll initially (as it is set to transparent) then when scrolled down it should remain clear, then when scrolled up it should show up black background… Any idea on why it shows up black background w/o scroll?

Here is my public share link: LINK
(how to access public share link)

2

Hi, can you please replicate this menu behavior to a new project. I have been working on the same thing but cant achieve it. I need transparent menu on start then menu goes away when scroll down, after scroll up menu goes back with white background @cheniwa